1、插件的组成
dialogBox-1.0.css
dialogBox-1.0.js
上面的文件，都可以在公司的前端静态资源库中下载到。插件的样式文件，必须引入，里面有公用弹层的样式，不引入无法正常显示，插件依赖jQuery库，所以页面也要引入jQuery 1.4.2 以上的版本。
2、页面引入代码
<link href="css/dialogBox-1.0.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/dialogBox-1.0.js"></script>
3、初始化
- 页面结构
<!---基本页面结构上的样式名字禁止修改-->
<div class="s-contain" id="dialog">
<div class="s-warpper">
<div class="s-butClose">
<img src="images/dialog_close1@13_13.png" />
</div>
<div class="s-topTitle">题目</div>
<div class="s-cont">
显示内容
</div>
<div class="s-butList s-row1">
<a href="javascript:void(0)" class="s-col1">按钮</a>
</div>
</div>
<div class="s-mask"></div>
</div>
- js 调用方法
/*必须使用最外层的div调用*/
var dialog = $("#dialog").dialogBox(); //可以用一个对象接收，在需要的时候展示弹出层
dialog.open(); //调用方法展示弹出层
4、支持的参数
- isOpen（可选）
默认： false
值类型：Boolean
作用：是否展示弹出层，默认是不展示，需调用open方法
例子：
$("#dialog").dialogBox({
isOpen：true //弹层会直接展示
});
- queue（可选）
默认： 0
值类型：Number
作用：设置弹出层的堆叠顺序，多个弹层同时展示时需要设置
例子：
$("#dialog").dialogBox();
$("#dialog1").dialogBox({
queue: 1 //可以遮住上一个弹层
});
- contHeight（可选）
默认： 0
值类型：Number
作用：设置弹层的高度，如果内容过多想设置滚动条时需要设置contHeight
4、支持的方法
- open（）
参数： 无
返回值：DialogBox
作用：展示弹出层
- close（）
参数： 无
返回值：无
作用：关闭弹出层
- scroll（height）
参数： Number
返回值： DialogBox
作用：设置滚动高度
注：可以链式调用上面的方法
$("#dialog").dialogBox().scroll(600).open();
5、其他自定义
- s-que 设置堆叠顺序
例子：
<div class="s-contain" id="dialog" s-que="2">
....
</div>
- s-width 设置弹层宽度
<div class="s-contain" id="dialog">
<div class="s-warpper" s-width="640">
....
</div>
</div>
6、推荐使用
//定义一个弹出层集合
var DGMAP = {};
//弹出层展示方法
function openDialog(id) {
try {
DGMAP[id].open();
} catch (e) {
if (e.message == "Cannot read property 'open' of undefined") {
console.error("列表中没有这个弹层");
}
}
}
