Skip to main content
Supported Regions:上海

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.openInfo or $w.modal1.closeInfo, where modal1 is the pop-up component ID.

Example: Button to Open Pop-up​
  1. Add a button and a pop-up component
  1. Select the pop-up component, set the pop-up to be closed by default, and disable the [Default Open Pop-up] property.
  1. Select the button component and add a click event.
  1. 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 methodcloseTypearray

Press ESC on the keyboard to close the popup (PC only)

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 maskdefaultMaskShowboolean

Example: true

Popup is open by defaultdefaultShowboolean

Set default open state. Call the pop-up window open/close method in Event-Component Method to dynamically control the pop-up window switch. [View Guide](https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/grid/WdModal#3-Open Close Pop-up Window)

Example: true

Templatetemplatestring

Preset template, select different templates for quick configuration of required pop-up type

Example: "default"

Mobile terminal popup location(Mini Program,Mobile)positionstring

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 opensopenobject
  • info:

    透传信息，在触发弹窗打开时接收该信息，信息来自于调用组件open方法的info
Compatible with all platforms

-

Popup closescloseobject
  • info:

    透传信息，在触发弹窗关闭时接收该信息，信息来自于调用组件close方法的info
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 statusmodalStatestring
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 popupopenobject
  • info:

    透传信息，在监听到弹窗打开时会传递该信息

-

close popupcloseobject
  • info:

    透传信息，在监听到弹窗关闭时会传递该信息

-

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-modalcomponent root element

      :scope.wd-modal  {
        /* 在这里编写CSS 样式 */
      }
PC-side root element.wd-pc-modalWrite styles for PC

      :scope.wd-pc-modal  {
        /* 可以为 PC 端的编写样式 */
      }
H5 root element.wd-h5-modalWrite style for H5

      :scope.wd-h5-modal  {
        /* 在这里编写CSS 样式 */
      }
Mini program root element.wd-mp-modalWrite style for mini program

      :scope.wd-mp-modal  {
        /* 可以为 小程序 端的编写样式 */
      }
Pop-up mask layer style.wd-modal-maskWrite styles for the mask layer

      :scope .wd-modal-mask  {
        /* 可以为遮罩层编写样式 */
        background-color: rgba(0, 0, 0, 0.5)
      }
Popup container style.wd-modal-contentWrite styles for the main container

      :scope .wd-modal-content  {
        /* 可以为主体容器编写样式 */
        inset-inline-start: auto;
        inset-inline-end: 0;
      }
Pop-up title area style.wd-modal-bd__hdSet style for the heading area

      :scope .wd-modal-bd__hd .wd-typography {
        /* 可以为标题区编写样式 */
        font-size: 20px;
        color: #333;
      }
Pop-up content area style.wd-modal-bd__mainWrite styles for the content area

      :scope .wd-modal-bd__main  {
        /* 可以为内容区编写样式 */
      }
Popup button area style.wd-modal-bd__ftWrite styles for the button area

      :scope .wd-modal-bd__ft  {
        /* 可以为按钮区编写样式 */
        justify-content: flex-start;
      }

Learn about Style API

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.