Modal

The modal is a page overlay container component, implementing dialog and drawer modal interfaces based on Ant Design's Modal and Drawer components. It handles temporary content display, user interaction confirmation, and complex form entry, supporting both modal and non-modal display modes, custom size and position configuration, and embedding other components to build complex modal interfaces.

The modal element has a hierarchical structure of Meta (components.Meta) → Type (components.Modal) → Instance. Developers can quickly create modal instance elements through JitAI's visual development tools.

Of course, developers can also create their own Type elements or modify the official components.ModalType element provided by JitAI in their own App to implement their own encapsulation.

Quick Start

Basic Configuration Example

Recommended Directory Structure
pages/
├── MyPage/
│   ├── e.json
│   ├── index.ts  
│   ├── page.ts
│   └── scheme.json

pages/MyPage/scheme.json - Modal Component Configuration
{
  "componentList": [
    {
      "fullName": "components.Modal",
      "type": "components.Modal",
      "name": "confirmModal",
      "title": "Confirmation Modal",
      "config": {
        "requireElements": [],
        "size": "normal",
        "type": "modal",
        "position": "page",
        "maskClosable": false,
        "showCloseControl": true,
        "bottomButtonList": [
          {
            "id": "confirm",
            "name": "Confirm",
            "type": "primary"
          },
          {
            "id": "cancel", 
            "name": "Cancel",
            "type": "default"
          }
        ],
        "bottomButtonAlign": "right",
        "layout": []
      },
      "showTitle": true
    }
  ]
}

pages/MyPage/page.ts - Call Modal
import { BasePage } from 'common/type';

export class MyPage extends BasePage {
  async showConfirmDialog() {
    const modal = app.getElement('confirmModal');
    await modal.call('Please confirm your operation');
  }
  
  async handleConfirm() {
    const modal = app.getElement('confirmModal');
    // Handle confirmation logic
    await modal.close();
  }
}

Configuration Properties

Property Name	Type	Description	Default Value	Required
size	string	Modal size: small\|normal\|big\|fullWindow	normal	No
type	string	Modal type: modal\|drawer	modal	No
position	string	Modal position: fullscreen\|page	page	No
maskClosable	boolean	Whether clicking mask closes modal	false	No
showCloseControl	boolean	Whether to show close button	true	No
bottomButtonList	ButtonProps[]	Bottom button configuration list	[]	No
bottomButtonAlign	string	Bottom button alignment: left\|center\|right	center	No
customWidth	number	Custom width (pixels)	-	No
customHeight	number	Custom height (pixels)	-	No
placement	string	Drawer position: right\|top\|bottom\|left	right	No
layout	Layout[]	Internal component layout configuration	[]	No
requireElements	requireElement[]	Dependent element configuration	[]	No

Variables

modalTitle

Modal title text variable, used to dynamically set the modal's display title.

Type: Stext
Default Value: Component title property value
Usage: modal.modalTitle.value = 'New Title'

Methods

call

Open modal and optionally set title.

Parameter Details

Parameter Name	Type	Description	Default Value	Required
modalTitle	string	Modal title text	-	No

Return Value

Type: Promise<void>

Usage Example

Open Modal Example
// Open with default title
await modal.call();

// Set title then open
await modal.call('User Information Confirmation');

// Call in event handler
button.subscribeEvent('onClick', async () => {
  await modal.call('Operation Confirmation');
});

close

Close modal.

Return Value

Type: Promise<void>

Usage Example

Close Modal Example
// Directly close modal
await modal.close();

// Close in button event
modal.subscribeEvent('onClickCancel', async () => {
  await modal.close();
});

open

Internal method, directly set modal to open state and trigger after-open event.

Usage Example

Directly Open Modal
modal.open();

closeState

Internal method, set modal to closed state and trigger after-close event.

Usage Example

Directly Close Modal State
modal.closeState();

getButtonList

Filter and set bottom button list based on permission configuration.

Usage Example

Update Button List
modal.getButtonList();

setConfig

Set component configuration, inherited from BaseComponent.

Parameter Details

Parameter Name	Type	Description	Default Value	Required
next	object	New configuration object	-	Yes
clean	boolean	Whether to completely replace configuration	false	No

Usage Example

Dynamically Update Configuration
modal.setConfig({
  size: 'big',
  maskClosable: true
});

publishEvent

Publish component events, inherited from BaseComponent.

Parameter Details

Parameter Name	Type	Description	Default Value	Required
name	string	Event name	-	Yes
ex	object	Additional data	-	No

Usage Example

Publish Custom Event
await modal.publishEvent('customEvent', { data: 'value' });

subscribeEvent

Subscribe to component events, inherited from BaseComponent.

Parameter Details

Parameter Name	Type	Description	Default Value	Required
name	string	Event name	-	Yes
evtCb	function	Event callback function	-	Yes
unSubscribeExist	boolean	Whether to cancel existing subscriptions	true	No

Return Value

Type: string - Subscription handle ID

Usage Example

Subscribe to Event Example
const handleId = modal.subscribeEvent('afterOpen', async (data) => {
  console.log('Modal opened', data);
});

unSubscribeEvent

Cancel event subscription, inherited from BaseComponent.

Parameter Details

Parameter Name	Type	Description	Default Value	Required
id	string	Subscription handle ID	-	Yes

Usage Example

Unsubscribe
modal.unSubscribeEvent(handleId);

destroy

Destroy component and clean up all resources, inherited from BaseComponent.

Usage Example

Destroy Component
// Manually destroy component, clean up event listeners and internal resources
modal.destroy();

runCode

Execute dynamic code, run in page context, inherited from BaseComponent.

Parameter Details

Parameter Name	Type	Description	Default Value	Required
code	string	JavaScript code to execute	-	Yes

Return Value

Type: any - Code execution result

Usage Example

Execute Dynamic Code
// Execute code in page context
const result = modal.runCode(`
  const currentUser = this.getCurrentUser();
  return currentUser.role === 'admin';
`);

if (result) {
  console.log('Current user is admin');
}

getPermConfig

Get current component's permission configuration, inherited from BaseComponent.

Return Value

Type: Record<string, any> | undefined - Permission configuration object

Usage Example

Get Permission Configuration
const permConfig = modal.getPermConfig();
if (permConfig?.button) {
  console.log('Has button permission:', permConfig.button);
}

Properties

openState

Modal open/close state variable, controls modal display and hide.

Type: Numeric
Value Meaning: 0=closed, 1=open
Usage: modal.openState.value = 1

config

Component configuration object, containing all modal configuration items, inherited from BaseComponent.

Type: ModalConfig & { requireElements: requireElement[] }
Usage: modal.config.size = 'big'

name

Component instance name, inherited from BaseComponent.

Type: string
Usage: modal.name

title

Component display title, inherited from BaseComponent.

Type: string
Usage: modal.title

type

Component type identifier, inherited from BaseComponent.

Type: string
Value: 'components.Modal'

fullName

Component full name, inherited from BaseComponent.

Type: string
Value: 'components.Modal'

showTitle

Whether to show component title, inherited from BaseComponent.

Type: boolean

app

Associated application instance, inherited from BaseComponent.

Type: App
Usage: modal.app

compType

Component type classification, inherited from BaseComponent.

Type: COMPONENT_TYPE
Value Meaning: normal、layout、reference
Usage: modal.compType

dataTypeList

Component variable data type list, inherited from BaseComponent.

Type: BaseDataType[]
Usage: modal.dataTypeList

Events

afterOpen

Event triggered after modal opens.

Usage Example

Listen to Modal Open Event
modal.subscribeEvent('afterOpen', async () => {
  console.log('Modal opened');
  // Can execute post-open logic here
  await loadModalData();
});

afterClose

Event triggered after modal closes.

Usage Example

Listen to Modal Close Event
modal.subscribeEvent('afterClose', async () => {
  console.log('Modal closed');
  // Clean up modal data
  await clearModalData();
});

Dynamic Button Events

Dynamic events triggered after clicking bottom buttons, event name format is onClick + button ID, such as onClickConfirm, onClickCancel.

Usage Example

Listen to Button Click Event
// Listen to button with ID confirm click
modal.subscribeEvent('onClickConfirm', async () => {
  console.log('Confirm button clicked');
  await handleConfirm();
  await modal.close();
});

// Listen to button with ID cancel click  
modal.subscribeEvent('onClickCancel', async () => {
  console.log('Cancel button clicked');
  await modal.close();
});

Advanced Features

When sidebar-style modal is needed, can configure as drawer type:

Drawer Modal Configuration Example
const drawerConfig = {
  type: 'drawer',
  placement: 'right',
  size: 'normal',
  showCloseControl: true,
  maskClosable: false
};

modal.setConfig(drawerConfig);
await modal.call('Sidebar Information');

Nested Component Layout

Modals can nest other components, implementing complex interfaces through layout configuration:

Nested Component Configuration
const layoutConfig = {
  layout: [
    { i: 'Form1', x: 0, y: 0, w: 12, h: 8 },
    { i: 'Table1', x: 0, y: 8, w: 12, h: 10 }
  ]
};

modal.setConfig(layoutConfig);

Suitable for complex forms or large data display scenarios:

Fullscreen Modal Configuration
modal.setConfig({
  size: 'fullWindow',
  position: 'fullscreen'
});

Custom Button Configuration

Supports multi-button configuration and permission control:

Complex Button Configuration
const buttonConfig = {
  bottomButtonList: [
    { id: 'save', name: 'Save', type: 'primary' },
    { id: 'saveAndContinue', name: 'Save and Continue', type: 'default' },
    { id: 'cancel', name: 'Cancel', type: 'default' }
  ],
  bottomButtonAlign: 'center'
};

modal.setConfig(buttonConfig);

// Handle each button event separately
modal.subscribeEvent('onClickSave', async () => {
  await saveData();
  await modal.close();
});

modal.subscribeEvent('onClickSaveAndContinue', async () => {
  await saveData();
  await clearForm();
});

Quick Start​

Basic Configuration Example​

Configuration Properties​

Variables​

modalTitle​

Methods​

call​

Parameter Details​

Return Value​

Usage Example​

close​

Return Value​

Usage Example​

open​

Usage Example​

closeState​

Usage Example​

getButtonList​

Usage Example​

setConfig​

Parameter Details​

Usage Example​

publishEvent​

Parameter Details​

Usage Example​

subscribeEvent​

Parameter Details​

Return Value​

Usage Example​

unSubscribeEvent​

Parameter Details​

Usage Example​

destroy​

Usage Example​

runCode​

Parameter Details​

Return Value​

Usage Example​

getPermConfig​

Return Value​

Usage Example​

Properties​

openState​

config​

name​

title​

type​

fullName​

showTitle​

app​

page​

compType​

dataTypeList​

Events​

afterOpen​

Usage Example​

afterClose​

Usage Example​

Dynamic Button Events​

Usage Example​

Advanced Features​

Drawer Modal Configuration​

Nested Component Layout​

Fullscreen Modal Mode​

Custom Button Configuration​

Quick Start

Basic Configuration Example

Configuration Properties

Variables

modalTitle

Methods

call

Parameter Details

Return Value

Usage Example

close

Return Value

Usage Example

open

Usage Example

closeState

Usage Example

getButtonList

Usage Example

setConfig

Parameter Details

Usage Example

publishEvent

Parameter Details

Usage Example

subscribeEvent

Parameter Details

Return Value

Usage Example

unSubscribeEvent

Parameter Details

Usage Example

destroy

Usage Example

runCode

Parameter Details

Return Value

Usage Example

getPermConfig

Return Value

Usage Example

Properties

openState

config

name

title

type

fullName

showTitle

app

page

compType

dataTypeList

Events

afterOpen

Usage Example

afterClose

Usage Example

Dynamic Button Events

Usage Example

Advanced Features

Drawer Modal Configuration

Nested Component Layout

Fullscreen Modal Mode

Custom Button Configuration