Pop-up
WdModal
Applicable Scenarios
For achieving the basic display effect of pop-up dialogs. Support varies across different platforms.


Basic Features
1. Pop-up Template
This component provides several common pop-up templates, such as default pop-up, confirmation pop-up, alert pop-up, campaign pop-up, etc.

Below are the default pop-up, alert pop-up, confirmation pop-up, and campaign pop-up. Additionally, you can customize the styles as needed:




2. Mobile Pop-up Position
On mobile devices, the pop-up can be positioned at the bottom of the page.

As shown in the campaign scenario effect:

3. Opening/Closing Pop-ups
The [Default Open Pop-up] property of the pop-up controls the on/off state of the initial pop-up display.
In [Event-Component Methods], call the pop-up's open/close methods to dynamically control the pop-up on/off state.
When opening or closing the pop-up, you can configure info as the passed parameter. After passing, the parameter can be retrieved via
$w.modal1.openInfoor$w.modal1.closeInfo, where modal1 is the pop-up component ID.
Example: Button to Open Pop-up
- Add a button and a pop-up component

- Select the pop-up component, set the pop-up to be closed by default, and disable the [Default Open Pop-up] property.

- Select the button component and add a click event.

- Select the pop-up to open and the execution method. Then select the component on the page and call the [Open Pop-up open] method.

This allows you to open the pop-up by clicking the button, as shown in the figure below:

Property Description
External properties received by the component
Property Name | Property Identifier | Type | Description |
|---|
| Disable method | closeType | array | Multi-selection mode, mask-click to close the mask layer, esc-click the ESC key to close (only takes effect on PC) Example: [ "mask" ] |
| Show mask | defaultMaskShow | boolean | Example: true |
| Popup is open by default | defaultShow | boolean | Example: true |
| Template | template | string | Preset template, select different templates for quick configuration of required pop-up type Example: "default" |
| Mobile terminal popup location(Mini Program,Mobile) | position | string | bottom - pop up at the bottom center - pop up in the middle of the page Example: "center" |
Event Description
Events exposed by the component. You can listen to component events to trigger external actions
Event Name | Event Code | Event Output Parameters event.detail | Applicable Scenarios | Description |
|---|
| Popup opens | open | object
| Compatible with all platforms | - |
| Popup closes | close | object
| Compatible with all platforms | - |
Property API
Through the Property API, you can access the internal state and property values of components. You can access internal values using$w.componentId.propertyName, such as $w.input1.value. For details, please refer to Property API
Read-only Property Name | Property Identifier | Type | Description |
|---|
| Popup status | modalState | string | |
openInfo | | Transparent transmission of information, receive the message when triggering the popup to open, the info comes from the component calling the open method | |
closeInfo | | Transparent transmission of information, info received when the popup is closed, info comes from the component's close method call |
Method API
Through the Method API, you can programmatically trigger internal methods of components, such as submitting forms, displaying popups, etc. You can call component methods using $w.componentId.methodName, such as $w.form1.submit()
Method Name | Method Identifier | Parameters | Method Description |
|---|
| Open popup | open | object
| - |
| close popup | close | object
| - |
Style API
Through the Style API, you can override the styles of internal elements in components to achieve customization. For example, in the low-code editor, you can write styles for all button components using #wd-page-root .wd-btn, and control individual component styles with :scope. For detailed instructions, please refer toStyle API
Name | Class Name | Description and Examples |
|---|
| root element | .wd-modal | component root element |
| PC-side root element | .wd-pc-modal | Write styles for PC |
| H5 root element | .wd-h5-modal | Write style for H5 |
| Mini program root element | .wd-mp-modal | Write style for mini program |
| Pop-up mask layer style | .wd-modal-mask | Write styles for the mask layer |
| Popup container style | .wd-modal-content | Write styles for the main container |
| Pop-up title area style | .wd-modal-bd__hd | Set style for the heading area |
| Pop-up content area style | .wd-modal-bd__main | Write styles for the content area |
| Popup button area style | .wd-modal-bd__ft | Write styles for the button area |
Frequently Asked Questions
How to implement local scrolling?
Scrolling Containers can be used to display content that requires scrolling when it exceeds the visible area.
When the total width/height of component content within a scrolling container exceeds the container's own width/height, scroll bars will appear, allowing users to view all content by sliding the scroll bars.
Note that you must set the width and height for the scrolling container, ensuring the content dimensions exceed those of the container itself, to enable the scrolling effect.
If only horizontal scrolling is required, ensure the scrolling container's width is less than the width of the content it contains.
If only vertical scrolling is required, ensure the scrolling container's height is less than the width of the content it contains.