自制弹层插件DialogBox初始版本

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("列表中没有这个弹层");
            }
        }
    }