dialogBoxS是由前端组开发的移动端公用弹层插件。
所需文件
dialogBoxS-1.0.js
dialogBoxS-noresizing-1.0.css（当页面中没有resizing.js时候，使用该css）
dialogBoxS.css（页面中有resizing.js）
使用方法
一、基本结构
<div class="s-dialogBox s-hide" id="dialogBoxS1">
<div class="s-dialog-wrapper">
<div class="s-butClose"><img src="../images/s-butClose@25_25.jpg" alt=""></div>
<div class="s-cont s-center">
<div class="s-cont-word">
<p class="section-txt s-center">您将删除所有图片，是否继续？</p>
</div>
</div>
<div class="s-butList s-row2">
<a href="#" class="col-bg-orange1"></a>
<a href="#" class="col-bg-green1"></a>
</div>
</div>
<div class="s-mask"></div>
</div>
图片.png
- 提示文字居中，div.s-cont 中加s-center
- 按钮颜色
col-bg-orange1： 橙色按钮
col-bg-green1：绿色按钮 - 示例为两个按钮的状态，一个按钮时
<!--一个按钮--较小按钮-->
<div class="s-butList s-row1">
<a href="#" class="s-but-small col-bg-orange1"></a>
</div>
图片.png
<!--一个按钮--较大按钮-->
<div class="s-butList s-row1">
<a href="#" class="s-but-big col-bg-orange1"></a>
</div>
图片.png
二、调用
1、初始化实例
var dialogBox1 = $("#dialogBoxS1").dialogBox();
支持参数
- isOpen
默认值：false
类型：Boolean
说明：初始化时是否自动显示弹层
- queue
默认值：0
类型：Num
说明：队列，设置弹层的堆叠顺序，同时出现多个弹层时候使用，数值越大层级越高
- animation
默认值：default
类型：String
说明：弹层出现时的动画效果
var dialogBox1 = $("#dialogBoxS1").dialogBox({
'isOpen': false,
'queue': 2,
'animation': 'default'
});
2、方法
- 打开弹层/关闭弹层
//打开弹层
dialogBox1.open();
//关闭弹层
dialogBox1.close();
- 提示内容有滚动时
better-scroll.js //有滚动时需要引入第三方滚动插件
//初始化滚动实例
dialogBox1.scroll();
//如果内容为动态加载，加载完成后需要刷新滚动实例
dialogBox1.refresh();
