Skip to main content
Supported Regions:上海

Dialog

WdModal

Applicable Scenarios​

Used to achieve the basic display effect of dialogs (pop-ups). Support varies across different platforms.

Basic Features​

1. Dialog Template​

This component provides several sets of commonly used dialog templates, such as default dialog, confirmation dialog, alert dialog, promotional dialog, etc.

The following default dialog, alert dialog, confirmation dialog, and promotional dialog are provided. You can also customize the styles as needed:

2. Mobile Dialog Position​

On mobile devices, dialogs can be set to appear at the bottom of the page.

The effect in activity scenarios is as follows:

3. Open/Close Dialog​

  • In the dialog's "Default Open Dialog" property, it controls the initial open/close state of the dialog.

  • In the 'Event-Component Methods', call the dialog's open/close methods to dynamically control the dialog.

  • When opening or closing the dialog, you can configure info as the passed-in parameter. After it is passed in, obtain the parameter via $w.modal1.openInfo or $w.modal1.closeInfo. Here, modal1 is the dialog component ID.

Example: Button Opening the Dialog​
  1. Add a button and dialog component
  1. Select the dialog component, set the dialog to be closed by default, and disable the dialog property "Default Open Dialog".
  1. Select the button component and add a click event.
  1. Select the dialog to be opened and execute the method. Then select the component on the page and call the "open Dialog" method.

You can achieve opening the dialog by clicking the button, as shown 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

-

Properties 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 Partial Scrolling?​

Scroll Container can be used to display content that requires scrolling when it exceeds boundaries.

When the total width/height of the component content within a scroll container exceeds the Scroll Container's own width/height, scroll bars will appear, allowing users to view all content within the container by scrolling through these bars.

Note that you must set the width and height for the Scroll Container to ensure that the dimensions of the internal content exceed those of the container, enabling the scrolling effect.

To achieve horizontal scrolling only, ensure that the width of the Scroll Container is less than the width of the content within it.

To achieve vertical scrolling only, ensure that the height of the Scroll Container is less than the height of the content within it.