dialog（对话框）

创建并显示对话框，弹出的对话框为非阻塞模式，用户点击对话框上的按钮后关闭( h5模式的对话框也可通过 closepopup关闭 )，并通过callback函数返回用户点击按钮的索引值或输入框中的值。

Dialog 组件包含:

组件名	作用	快速体验
alert	警告框	警告框
confirm	确认框	确认框
prompt	输入对话框	输入对话框
toast	消息提示框	自动消失提示框

(function() { var ele = ['alertBtn', 'confirmBtn', 'promptBtn', 'toastBtn']; var btn = ['是', '否']; mui('#dialogDemo').on('click', 'button', function(e) { var target = e.target.id; switch(e.target.id) { case 'alertBtn': mui.alert('欢迎使用 MUI !') break; case 'confirmBtn': mui.confirm('MUI是个好框架', 'Hello MUI', btn, function(e) { e.index == 0 ? mui.toast('感谢您的支持!') : mui.toast('MUI 没有得到你的认可,继续加油!') }) break; case 'promptBtn': mui.prompt('请输入您对MUI的评语', '性能好', 'Hello MUI', '', function(e) { e.index == 1 && e.value != '' && mui.toast('谢谢您的评价: ' + e.value) }) break; case 'toastBtn': mui.toast('欢迎体验Hello MUI') break; default: break; } }) })()

mui会根据ua判断,弹出原生对话框还是h5绘制的对话框,在基座中默认会弹出原生对话框,可以配置type属性,使得弹出h5模式对话框

两者区别:1.原生对话框可以跨webview,2.h5对话框样式统一而且可以修改对话框属性或样式

mui v3.0 版本(含)以上的dialog控件支持换行（\n）显示

• .alert( message, title, btnValue, callback [, type] )

  • message Type: String 提示对话框上显示的内容
  • title Type: String 提示对话框上显示的标题
  • btnValue Type: String 提示对话框上按钮显示的内容
  • callback Type: Function 提示对话框上关闭后的回调函数
  • type Value: 'div' 是否使用h5绘制的对话框

• .confirm( message, title, btnValue, callback [, type] )

  • message Type: String 提示对话框上显示的内容
  • title Type: String 提示对话框上显示的标题
  • btnValue Type: Array 提示对话框上按钮显示的内容
  • callback Type: Function 提示对话框上关闭后的回调函数
  • type Value: 'div' 是否使用h5绘制的对话框

• .prompt( message, placeholder, title, btnValue, callback[, type] )

  • message Type: String 提示对话框上显示的内容
  • placeholder Type: String 编辑框显示的提示文字
  • title Type: String 提示对话框上显示的标题
  • btnValue Type: Array 提示对话框上按钮显示的内容
  • callback Type: Function 提示对话框上关闭后的回调函数
  • type Value: 'div' 是否使用h5绘制的对话框

如果有定制对话框样式的需求( 只能修改h5模式对话框)可以在mui.css中修改.mui-popup类下的样式

如果需要修改DOM结构可以按照以下方式处理.

//修改弹出框默认input类型为password 
mui.prompt('text','deftext','title',['true','false'],null,'div') 
document.querySelector('.mui-popup-input input').type='password' 

• .toast( message [,options])

  • message:'String' - 消息框显示的文字内容
    options:{JSON} - 提示消息的参数
    **options 参数需要mui v3.5+支持
    

    参数	说明	说明
    duration	持续显示时间,默认值 short(2000ms)	支持 整数值 和 String , String可选: long(3500ms),short(2000ms)
    type	强制使用mui消息框(div模式)	'div'

     mui.toast('登陆成功',{ duration:'long', type:'div' }) 

• .closePopup()(只能关闭h5模式的对话框)

  • 关闭最后一次弹出的对话框

• .closePopups()(只能关闭h5模式的对话框)

  • 关闭所有对话框

扩展阅读

问答社区话题讨论：利用mui toast制作下拉刷新获取新内容的提示

代码块激活字符 mdalert mdconfirm mdprompt mdtoast mdclosepopup mdclosepopups