技術標籤：jqueryjslayer彈窗詢問彈窗自定義彈窗

基於Layer的彈窗

方法重新封裝了 layer.tips 使用前，請仔細閱讀此文字
* @Author: 羽渡塵
* @兩種實現方法
* @需要引用jquery.js、layer.js、ydcTip.js
* @統一可傳遞的引數形式
let option = {
    /*載入您的自定義樣式檔案(注意*樣式檔案必須在layer/skin目錄下)*/
    extend: 'yourskin/yourskin.css',
    /*layer.tips引數 可見layer文件*/
    tips: [{
        tips:
 
 3,
        tipsMore:false,
        skin:'layer-ext-yourskin',
        time : 0
    }],
    /*提示內容*/
    title : '確定要刪除嗎？',
    /*可以傳遞任意引數形式 以原形式攜帶*/
    obj : [obj],
    /*自定義按鈕及觸發方式 可攜帶引數,為了方便您的DIY,按鈕都為span標籤*/
    btn:[{
        /*按鈕名稱 :["方法名稱","觸發器","唯一標識類似於id通過ydc-sign獲取(attr("ydc-sign"))","{傳遞引數}"]
        方法會自帶一個取消按鈕，如果不滿足需求請自定義方法名稱帶有close的按鈕,將會替換預設取消按鈕*/
 

        '確定':['delInit','click','sign_id1','{"id":"id","meetType":"meetType"}'],
        '取消':['l_close',"click",'sign_id2','{"id":"id","meetType":"meetType"}']
    }]
};

第一種 使用示例 ----------------------------
 
-----------------------
你可以在單獨的按鈕上配置
<a href="javascript:void(0)"
class="btn-ydc-tips font-blue"
data-ydctips='{"btn":[{"確定":["delInit","click","sign_id1",{"id":"id","meetType":"meetType"}]}]}'>Example</a>
必要的class名：btn-ydc-tips
必要的傳參：data-ydctips

第二種 使用示例 ---------------------------------------------------
<a href="javascript:void(0)" onclick="example(this,'引數')">Example</a>
function example(obj,引數) {
        let option = {
            title : '確定要刪除嗎？',
            btn:[{
                '確定':['delInit','click','sign_id1','{"id":"id"}']
            }],
            ..........
        };
        ydcLayFun.customize(option,obj);
}

* @關於配置的按鈕回撥
function delInit(val,obj) {
    //val內參數示例
    val = {
        btn_this: object //自動攜帶當前觸發元素
        id: "id"
        meetType: "meetType"
    }
    obj 為你傳遞的任意引數形式 以原形式攜帶
}


* @關於自定義樣式檔案 ---------------------------------------------
layer提供了強健的面板擴充套件介面，這意味著如果你對layer預設的樣式不太滿意，你還有更多的選擇。
第一步：存放
將您下載的面板包（假設資料夾名為：myskin）解壓。
如果是獨立版的layer，則將myskin存放在skin目錄下
如果是layui中使用layer，則將myskin存放在css/modules/layer目錄下
第二步：使用
1. 全域性配置
layer.config({
  extend: 'myskin/style.css', //載入新面板
  skin: 'layer-ext-myskin' //一旦設定，所有彈層風格都採用此主題。
});
2. 區域性使用
layer.config({
  extend: 'myskin/style.css' //同樣需要載入新面板
});
//單個使用
layer.open({
  skin: 'layer-ext-myskin' //只對該層採用myskin面板
});
//也就是說，無論你全域性還是區域性，都要通過layer.config的extend來載入樣式。

示例效果

檔案下載

提取碼:vn0v、檔案ydcTip.js
提取碼:ac8s、ydcTip.css

jquery.js、layer.js，請自行官方下載。