全部产品

Modal 对话框

当应用中需要比较明显的对用户当前的操作行为进行警示或提醒时,可以使用对话框。用户需要针对对话框进行操作后方可结束。

说明:Modal 组件为官方组件,不支持自定义。可在Modal 组件源代码的 css 中设置弹出的框的背景色为透明。

扫码体验

image.png

示例代码

// API-DEMO page/component/modal.json
{
  "defaultTitle": "Modal",
  "usingComponents":{
    "modal": "mini-antui/es/modal/index"
  }
}

<!-- API-DEMO page/component/modal.axml -->
<view>
    <view style="margin-top: 10px;" />
    <button onTap="openModal21" style="margin: 0 10px;">带图弹窗</button>
    <view style="margin-top: 10px;" />
    <button onTap="openModal22" style="margin: 0 10px;">带图弹窗-小图</button>
    <view style="margin-top: 10px;" />
    <button onTap="openModal2" style="margin: 0 10px;">带图弹窗-大图</button>
    <view style="margin-top: 10px;" />
    <button onTap="openModal" style="margin: 0 10px;">通用modal</button>
    <view style="margin-top: 10px;" />
    <button onTap="openModal3" style="margin: 0 10px;">运营活动弹窗-大</button>
    <view style="margin-top: 10px;" />
    <button onTap="openModal4" style="margin: 0 10px;">运营活动弹窗-小</button>
    <modal
        show="{{modalOpened21}}"
        onModalClick="onModalClick21"
        onModalClose="onModalClose21"
        topImage="https://gw.alipayobjects.com/zos/rmsportal/yFeFExbGpDxvDYnKHcrs.png"
    >
        <view slot="header">标题单行</view>
        说明当前状态、提示用户解决方案,最好不要超过两行。
        <view slot="footer">确定</view>
    </modal>
    <modal
        show="{{modalOpened2}}"
        onModalClick="onModalClick2"
        onModalClose="onModalClose2"
        topImage="https://gw.alipayobjects.com/zos/rmsportal/yFeFExbGpDxvDYnKHcrs.png"
        topImageSize="lg"
        closeType="1"
    >
        <view slot="header">标题单行</view>
        说明当前状态、提示用户解决方案,最好不要超过两行。
        <view slot="footer">确定</view>
    </modal>
    <modal
        show="{{modalOpened22}}"
        onModalClick="onModalClick22"
        onModalClose="onModalClose22"
        topImage="https://gw.alipayobjects.com/zos/rmsportal/yFeFExbGpDxvDYnKHcrs.png"
        topImageSize="sm"
    >
        <view slot="header">标题单行</view>
        说明当前状态、提示用户解决方案,最好不要超过两行。
        <view slot="footer">确定</view>
    </modal>
    <modal
        show="{{modalOpened}}"
        onModalClick="onModalClick"
        onModalClose="onModalClose"
    >
        <view style="margin: 20px 0 10px 0;">让员工用阿里云扫一扫,添加为店员</view>
        <image mode="widthFix" style="width: 100%;" src="https://tfsimg.alipay.com/images/mobilecodec/TB1JjWmXkyEDuNjme6tXXXIKXXa" />
        二维码每分钟自动更新
        <view slot="footer">确定</view>
    </modal>
    <modal
        show="{{modalOpened3}}"
        onModalClose="onModalClick3"
        advice="{{true}}"
        >
        <view style="display: flex; height: 465px; width: 319px;">
            <image
                style="height: 465px;width: 319px;"
                src="https://gw.alipayobjects.com/zos/rmsportal/vJzAWQLgeDLGOMKiIgZt.png"
            />
        </view>
    </modal>
    <modal
        show="{{modalOpened4}}"
        onModalClose="onModalClick4"
        advice="{{true}}"
        >
        <view style="display: flex; width: 270px; height: 350px;">
            <image
                style="width: 270px;height: 350px;"
                src="https://gw.alipayobjects.com/zos/rmsportal/vJzAWQLgeDLGOMKiIgZt.png"
            />
        </view>
    </modal>
</view>

// API-DEMO page/component/modal.js
Page({
  data: {
    modalOpened: false,
    modalOpened2: false,
    modalOpened21: false,
    modalOpened22: false,
    modalOpened3: false,
    modalOpened4: false,
  },
  openModal() {
    this.setData({
      modalOpened: true,
    });
  },
  onModalClick() {
    this.setData({
      modalOpened: false,
    });
  },
  onModalClose() {
    this.setData({
      modalOpened: false,
    });
  },
  openModal2() {
    this.setData({
      modalOpened2: true,
    });
  },
  onModalClick2() {
    this.setData({
      modalOpened2: false,
    });
  },
  onModalClose2() {
    this.setData({
      modalOpened2: false,
    });
  },
  openModal21() {
    this.setData({
      modalOpened21: true,
    });
  },
  onModalClick21() {
    this.setData({
      modalOpened21: false,
    });
  },
  onModalClose21() {
    this.setData({
      modalOpened21: false,
    });
  },
  openModal22() {
    this.setData({
      modalOpened22: true,
    });
  },
  onModalClick22() {
    this.setData({
      modalOpened22: false,
    });
  },
  onModalClose22() {
    this.setData({
      modalOpened22: false,
    });
  },
  openModal3() {
    this.setData({
      modalOpened3: true,
    });
  },
  onModalClick3() {
    this.setData({
      modalOpened3: false,
    });
  },
  openModal4() {
    this.setData({
      modalOpened4: true,
    });
  },
  onModalClick4() {
    this.setData({
      modalOpened4: false,
    });
  },
});

属性

属性名描述类型默认值
className自定义 class。String-
show是否展示 modal。Booleanfalse
showClose是否渲染 关闭。Booleantrue
closeType关闭图标类型 0:灰色图标 1:白色图标。String0
onModalClick点击 footer 部分的回调。() => void-
onModalClose点击 关闭 的回调, showClose 为 false 时无需设置。() => void-
topImage顶部图片。String-
topImageSize顶部图片规则,可选值:lg (带图弹框-大图)、md (带图弹框)、sm(带图弹框-小图)。Stringmd
advice是否是运营类弹窗。Booleanfalse
disableScrollmodal 展示时是否禁止页面滚动(以真机效果为准Booleantrue

slots

slotName说明必填
headermodal 头部。
footermodal 尾部。