1、插件的組成

dialogBox-1.0.css
dialogBox-1.0.js

??上面的文件，都可以在公司的前端靜態(tài)資源庫中下載到。插件的樣式文件，必須引入，里面有公用彈層的樣式，不引入無法正常顯示，插件依賴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、初始化

• 頁面結(jié)構(gòu)

  <!---基本頁面結(jié)構(gòu)上的樣式名字禁止修改-->
   <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">
                 顯示內(nèi)容
            </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 調(diào)用方法

  /*必須使用最外層的div調(diào)用*/
  var dialog = $("#dialog").dialogBox();  //可以用一個對象接收，在需要的時候展示彈出層
  dialog.open();  //調(diào)用方法展示彈出層

4、支持的參數(shù)

• isOpen（可選）

默認(rèn)： false
值類型：Boolean
作用：是否展示彈出層，默認(rèn)是不展示，需調(diào)用open方法

例子：

    $("#dialog").dialogBox({
           isOpen：true //彈層會直接展示
    }); 

• queue（可選）

默認(rèn)： 0
值類型：Number
作用：設(shè)置彈出層的堆疊順序，多個彈層同時展示時需要設(shè)置

例子：

    $("#dialog").dialogBox(); 
    $("#dialog1").dialogBox({
           queue: 1 //可以遮住上一個彈層
    }); 

• contHeight（可選）

默認(rèn)： 0
值類型：Number
作用：設(shè)置彈層的高度，如果內(nèi)容過多想設(shè)置滾動條時需要設(shè)置contHeight

4、支持的方法

• open（）

參數(shù)： 無
返回值：DialogBox
作用：展示彈出層

• close（）

參數(shù)： 無
返回值：無
作用：關(guān)閉彈出層

• scroll（height）

參數(shù)： Number
返回值： DialogBox
作用：設(shè)置滾動高度

注：可以鏈?zhǔn)秸{(diào)用上面的方法

    $("#dialog").dialogBox().scroll(600).open();

5、其他自定義

• s-que 設(shè)置堆疊順序
  例子：

    <div class="s-contain" id="dialog"  s-que="2">
        ....
    </div>

• s-width 設(shè)置彈層寬度

    <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("列表中沒有這個彈層");
            }
        }
    }