支付宝小程序浮层组件对话框·Modal

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

示例代码

{
 "defaultTitle": "Modal",
 "usingComponents": {
   "modal": "mini-ali-ui/es/modal/index"
 }
}
<view>
  <button onTap="openModal">打开modal</button>
  <modal
    show="{{modalOpened}}"
    onModalClick="onModalClick"
    onModalClose="onModalClose"
    topImage="https://gw.alipayobjects.com/zos/rmsportal/yFeFExbGpDxvDYnKHcrs.png"
  >
    <view slot="header">标题单行</view>
    说明当前状态、提示用户解决方案，最好不要超过两行。
    <view slot="footer">确定</view>
  </modal>
</view>
Page({
  data: {
    modalOpened: false,
  },
  openModal() {
    this.setData({
      modalOpened: true,
    });
  },
  onModalClick() {
    this.setData({
      modalOpened: false,
    });
  },
  onModalClose() {
    this.setData({
      modalOpened: false,
    });
  }
});

属性

属性	类型	默认值	描述	最低版本
className	String	-	自定义 class。	-
show	Boolean	false	是否展示 modal。可选值：true、false。	-
showClose	Boolean	false	是否渲染关闭。可选值：true、false。	-
mask	Boolean	true	是否展示蒙层。可选值：true、false。	-
closeType	String	0	关闭图表类型。可选值：0-灰色图标；1-白色图标。	-
onModalClick	EventHandle	() => void	选择区间时的回调。	-
onModalClose	EventHandle	() => void	点击关闭的回调, showClose 为 false 时无需设置。	-
topImage	String	-	顶部图片。	-
topImageSize	String	md	顶部图片规则.可选值：lg (带图弹框-大图)md (带图弹框)sm(带图弹框-小图)	-
buttons	Array<Object>	md	底部自定义多按钮, 详情见 buttons 配置。	-
onButtonClick	EventHandle	(e: Object) => void	点击 buttons 部分的回调。	-
buttonsLayout	String	horizontal	设置 buttons 的对齐方式。可选值：horizontal，vertical。	-
advice	Boolean	false	是否是运营类弹窗。可选值：true、false。	-
zIndex	String/Number	-	设置弹框层级。	-
disableScroll	Boolean	false	modal 展示时是否禁止页面滚动（以真机效果为准）。可选值：true、false。	-
onMaskClick	EventHandle	() => void	点击遮罩层时的回调	1.1.2

buttons

提供按钮组配置，每一项表示一个按钮。

属性	类型	描述
text	String	按钮的文本。
extClass	String	按钮自定义 Class，可用户定制按钮样式。

slots

slotName	描述	必填
header	modal 头部。	false
footer	modal 尾部。	false

支付宝小程序浮层组件 对话框·Modal

示例代码

属性

buttons

slots

支付宝小程序浮层组件对话框·Modal