Skip to main content

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​

组件接收的外部传入的属性

属性名
属性标识
类型
说明
弹窗默认打开状态defaultShowboolean

设置默认打开状态。在【事件-组件方法】中调用弹窗的打开/关闭方法，可动态控制弹窗开关。查看指引

示例：true

模板templatestring

预设模板，可以通过选择不同的模板快速配置所需的弹窗类型

示例："default"

移动端弹窗位置(小程序,移动端)positionstring

bottom-在下方弹出弹窗，center-在页面中间弹出弹窗

示例："center"

关闭方式closeTypearray

点击键盘ESC键关闭弹窗仅在PC端生效

多选模式，mask-点击遮罩层关闭，esc-点击键盘ESC关闭（仅在PC端生效）

示例：[ "mask" ]

展示遮罩defaultMaskShowboolean

示例：true

Event Description​

组件暴露的事件，可以监听组件的事件来触发一些外部的动作

事件名
事件code
事件出参 event.detail
适用情况
说明
弹窗打开时openobject
  • info:

    透传信息，在触发弹窗打开时接收该信息，信息来自于调用组件open方法的info
兼容三端

-

弹窗关闭时closeobject
  • info:

    透传信息，在触发弹窗关闭时接收该信息，信息来自于调用组件close方法的info
兼容三端

-

Property API​

通过属性 API，可以获取组件内部的状态和属性值，可以通过$w.componentId.propertyName 来访问组件内部的值，如 $w.input1.value ，详请请参考 属性 API

只读属性名
属性标识
类型
说明
弹窗状态modalStatestring
openInfo

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

closeInfo

透传信息，在触发弹窗关闭时接收的信息，信息来自于调用组件close方法的info

Method API​

通过方法 API，可以通过程序触发组件内部的方法，比如提交表单，显示弹窗等, 可以通过$w.componentId.methodName来调用组件方法，如 $w.form1.submit()

方法名
方法标识
参数
方法说明
打开弹窗openobject
  • info:

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

-

关闭弹窗closeobject
  • info:

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

-

Style API​

通过样式 API，可以覆盖组件中内部元素的样式来实现自定义，例如在低代码编辑器中中通过 #wd-page-root .wd-btn 即可为所有的按钮组件编写样式，通过 :scope 可以控制单个组件样式， 详细说明请参考样式 API

名称
类名
说明和示例
根元素.wd-modal组件根元素

      :scope.wd-modal  {
        /* 在这里编写CSS 样式 */
      }
PC 端根元素.wd-pc-modal可以为 PC 端的编写样式

      :scope.wd-pc-modal  {
        /* 可以为 PC 端的编写样式 */
      }
H5 端根元素.wd-h5-modal可以为 H5 端的编写样式

      :scope.wd-h5-modal  {
        /* 在这里编写CSS 样式 */
      }
小程序 端根元素.wd-mp-modal可以为 小程序 端的编写样式

      :scope.wd-mp-modal  {
        /* 可以为 小程序 端的编写样式 */
      }
弹窗遮罩层样式.wd-modal-mask可以为遮罩层编写样式

      :scope .wd-modal-mask  {
        /* 可以为遮罩层编写样式 */
        background-color: rgba(0, 0, 0, 0.5)
      }
弹窗主体容器样式.wd-modal-content可以为主体容器编写样式

      :scope .wd-modal-content  {
        /* 可以为主体容器编写样式 */
        inset-inline-start: auto;
        inset-inline-end: 0;
      }
弹窗标题区样式.wd-modal-bd__hd可以为标题区编写样式

      :scope .wd-modal-bd__hd .wd-typography {
        /* 可以为标题区编写样式 */
        font-size: 20px;
        color: #333;
      }
弹窗内容区样式.wd-modal-bd__main可以为内容区编写样式

      :scope .wd-modal-bd__main  {
        /* 可以为内容区编写样式 */
      }
弹窗按钮区样式.wd-modal-bd__ft可以为按钮区编写样式

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

了解样式 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.