Dialog 对话框

模拟系统的消息提示框而实现的一套模态对话框组件,用于消息提示、确认消息和自定义对话框。

提示

Dialog 可用于美化系统自带的alertconfirmprompt,也可用于自定义复杂的对话框。

基本用法

基础的对话框用法。

显示代码

自定义

自定义对话框样式或内容。

显示代码

参数

你可以通过修改$.dialogDefaults来修改全局默认配置,也可以在初始化时传入指定配置$.dialog({xx: xx})

参数 说明 类型 可选值 默认值
id 对话框id(你可以再次调用对话框函数,设置一个新id值,来弹出一个新的对话框) string - 'u-confirm-0'
coverBGColor 遮罩背景色 string - 'rgba(0, 0, 0, .5)'
coverClick 遮罩是否可点击,以隐藏对话框 boolean - false
zIndex 弹窗z-index样式 string / number - '100'
top 对话框margin-top string - '15vh'
width 对话框宽度 string - '420px'
headerCenter 头部居中 boolean - false
footerCenter 底部居中 boolean - false
content 对话框内容,支持html string - ''
confirm 点击“确定”按钮触发的事件,返回true将关闭对话框,否则不会关闭。你可以设置某元素的属性为u-type="confirm"来绑定这个事件 function - function () {return true}
cancel 点击"遮罩"关闭对话框/"取消"按钮/右上角“关闭”按钮触发的事件,返回true将关闭对话框,否则不会关闭。你可以设置某元素的属性为u-type="cancel"来绑定这个事件 function - function () {return true}
beforeHide 关闭对话框前触发的函数,返回true将关闭对话框,否则不会关闭 function - function () {return true}
afterHide 关闭对话框后触发的函数 function - function () {}
showHeader 是否显示头部布局(标题和关闭按钮) boolean - true
showClose 是否显示“关闭”按钮 boolean - true
showCancel 是否显示“取消”按钮 boolean - true
showConfirm 是否显示“确定”按钮 boolean - true
footer 底部额外扩展插入的html(位于“取消”按钮前) string - ''
title 标题文字,支持函数返回字符串(国际化时可使用) string / function - 由国际化组件获取的i18n.title值对应的文本或'提示'
labelConfirm “确定”按钮文本,支持函数返回字符串(国际化时可使用) string / function - 由国际化组件获取的i18n.confirm值对应的文本或'确定'
labelCancel “取消”按钮文本,支持函数返回字符串(国际化时可使用) string / function - 由国际化组件获取的i18n.cancel值对应的文本或'取消'
i18n.title 国际化时title标题文本对应的key值 string - 'uConfirmTitle'
i18n.confirm 国际化时labelConfirm“确定”按钮文本对应的key值 string - 'uConfirmConfirm'
i18n.cancel 国际化时labelCancel“取消”按钮文本对应的key值 string - 'uConfirmCancel'