当前位置:JS特效 » 其他 » 移动端优先且支持jQuery和Zepto的模态对话框插件
 移动端优先且支持jQuery和Zepto的模态对话框插件
如果您觉得内容不错,请分享:

插件介绍

dialog.js是一款移动端优先且同时支持jQuery和Zepto的模态对话框插件。它支持三种类型的弹出对话框,支持自定义按钮,文字等,并支持事件监听。

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:45
简要教程

dialog.js是一款移动端优先且同时支持jQuery和Zepto的模态对话框插件。它支持三种类型的弹出对话框,支持自定义按钮,文字等,并支持事件监听。它的特点还有:

  • 支持三种类型的弹出对话框:alert、confirm、info。
  • 可以自定义按钮的文字、样式、回调函数。
  • 支持 jQuery 和 Zepto。
  • 支持4个状态事件,用来监听状态改变。
  • 对话框默认样式主要针对移动端展示做优化。

使用方法

使用该模态对话框插件需要在页面中引入dialog.css,jquery或zepto,以及dialog.js文件。





                 
                
初始化插件

可以通过下面的方法来初始化一个对话框。

$.dialog({
    contentHtml : '弹出对话框的内容部分'
}); 
                

配置参数

可用的配置参数如下:

参数 默认值 描述
type 'alert'

对话框的种类(alert-确定; confirm-确定/取消; info)

titleText '信息提示'

标题文字

showTitle true

是否显示标题。值为:true、false

contentHtml ''

主体部分的HTML内容。默认值为空

dialogClass ''

对话框自定义的 class。默认值为空

autoClose 0

自动关闭的延时时间(单位:毫秒)。为0时表示不自动关闭;大于0时,表示自动关闭对话框

overlayClose fasle

是否可点击遮罩层关闭对话框。值为:true、false

buttonText {
??? ok : '确定',
??? cancel : '取消'
}

按钮的文字

buttonClass {
??? ok : '',
??? cancel : ''
}

按钮的自定义 class

infoText ''

info 类型对话框的提示文字

infoIcon ''

info 类型对话框的提示图标。值为图标的路径

onClickOk function(){}

回调函数,点击“确定”按钮时执行

onClickCancel function(){}

回调函数,点击“取消”按钮时执行

onBeforeShow function(){}

回调函数,对话框显示前时执行

onShow function(){}

回调函数,对话框显示后时执行

onBeforeClosed function(){}

回调函数,对话框关闭前时执行

onClosed function(){}

回调函数,对话框关闭后时执行

浏览器兼容

dialog 已经在 Internet Explorer 9+、Firefox 22+、Opera 9+、Google Chrome 和 Safari 浏览器上被验证过,并且应该可以再更多浏览器上工作。

移动浏览器(例如:Chrome mobile、 Safari mobile 和其它浏览器)也被支持。已经在 iOS (iPad、 iPhone、 iPod)、Android 设备上进行了测试。其他基于 Chrome 内核的移动浏览器也基本上支持。

dialog.js插件作者:方雨_Yu

dialog.js插件的github地址为:https://github.com/sufangyu/dialog.js

Top