dialogBoxS是由前端組開(kāi)發(fā)的移動(dòng)端公用彈層插件。

所需文件

dialogBoxS-1.0.js
dialogBoxS-noresizing-1.0.css（當(dāng)頁(yè)面中沒(méi)有resizing.js時(shí)候，使用該css）
dialogBoxS.css（頁(yè)面中有resizing.js）

使用方法

一、基本結(jié)構(gòu)

<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">您將刪除所有圖片，是否繼續(xù)？</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：綠色按鈕
• 示例為兩個(gè)按鈕的狀態(tài)，一個(gè)按鈕時(shí)

<!--一個(gè)按鈕--較小按鈕-->
<div class="s-butList s-row1">
       <a href="#" class="s-but-small col-bg-orange1"></a>
</div>

圖片.png

<!--一個(gè)按鈕--較大按鈕-->
<div class="s-butList s-row1">
       <a href="#" class="s-but-big col-bg-orange1"></a>
</div>

圖片.png

二、調(diào)用

1、初始化實(shí)例

var dialogBox1 = $("#dialogBoxS1").dialogBox();

支持參數(shù)

• isOpen

默認(rèn)值：false
類型：Boolean
說(shuō)明：初始化時(shí)是否自動(dòng)顯示彈層

• queue

默認(rèn)值：0
類型：Num
說(shuō)明：隊(duì)列，設(shè)置彈層的堆疊順序，同時(shí)出現(xiàn)多個(gè)彈層時(shí)候使用，數(shù)值越大層級(jí)越高

• animation

默認(rèn)值：default
類型：String
說(shuō)明：彈層出現(xiàn)時(shí)的動(dòng)畫(huà)效果

var dialogBox1 = $("#dialogBoxS1").dialogBox({
        'isOpen': false,
        'queue': 2,
        'animation': 'default'
});

2、方法

• 打開(kāi)彈層/關(guān)閉彈層

//打開(kāi)彈層
dialogBox1.open();
//關(guān)閉彈層
dialogBox1.close();

• 提示內(nèi)容有滾動(dòng)時(shí)

better-scroll.js //有滾動(dòng)時(shí)需要引入第三方滾動(dòng)插件

    //初始化滾動(dòng)實(shí)例
    dialogBox1.scroll();
    //如果內(nèi)容為動(dòng)態(tài)加載，加載完成后需要刷新滾動(dòng)實(shí)例
    dialogBox1.refresh();