当前位置：首页 > 网页特效 > 弹出层

移动端优先且支持jQuery和Zepto的模态对话框插件

分类：弹出层日期：2024-05-14 点击(5) 评论(0)

简介

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

```html
<link rel="stylesheet" href="css/dialog.css">
<script type="text/javascript" src="js/jquery.min.js"></script>

<script src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/dialog.js"></script> 
```                
#####  初始化插件
可以通过下面的方法来初始化一个对话框。

```html
$.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 内核的移动浏览器也基本上支持。

web299.com

移动端优先且支持jQuery和Zepto的模态对话框插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果