【整理】【layui】layer.open的常用參數例子

 

layer.open({
    // 基本層類型：0（信息框，默認）1（頁面層）2（iframe層，也就是解析content）3（加載層）4（tips層）
    type: 1,
    title: "標題",
    // 當type: 2時就是url
    content: "內容/url",
    // 寬高：如果是100%就是滿屏
    area: ['733px', '450px'],
    // 坐標：auto（默認坐標，即垂直水平居中），具體當文檔：https://www.layui.com/doc/modules/layer.html#offset
    offset: 'auto',
    // 按鈕：按鈕1的回調是yes（也可以是btn1），而從按鈕2開始，則回調為btn2: function(){}，以此類推
    btn: ['按鈕1', '按鈕2'],
    // 關閉按鈕：layer提供了兩種風格的關閉按鈕，可通過配置1和2來展示，如果不顯示，則0
    closeBtn: 1,
    // 遮罩：默認：0.3透明度的黑色背景（'#000'）
    shade: 0.3,
    // 是否點擊遮罩關閉：默認：false
    shadeClose: false,
    // 自動關閉所需毫秒：默認：0不會自動關閉
    time: 0,
    // 最大最小化：默認：false
    maxmin: false,
    // 固定：默認：true
    fixed: true,
    // 是否允許拉伸：默認：true
    resize: true,
    // 層疊順序：默認：19891014，一般用於解決和其它組件的層疊沖突
    zIndex: 19891014,
    // 層彈出后的成功回調方法：layero前層DOM，index當前層索引
    success: function(layero, index){
    },
    // 第一個按鈕事件，也可以叫btn1
    yes: function (index, layero) {
    },
    btn2: function (index, layero) {
        layer.close(index);
    },
    // 右上角關閉按鈕觸發的回調：默認會自動觸發關閉。如果不想關閉，return false即可
    cancel: function(index, layero){
        if(layer.confirm('確定要關閉么')){ //只有當點擊confirm框的確定時，該層才會關閉
            layer.close(index);
        }
        return false;
    },
    // 層銷毀后觸發的回調：無論是確認還是取消，只要層被銷毀了，end都會執行，不攜帶任何參數。
    end: function(){
    },
    // 最大化后觸發的回調：攜帶一個參數，即當前層DOM
    full: function(layero){
    },
    // 最小化后觸發的回調：攜帶一個參數，即當前層DOM
    min: function(layero){
    },
    // 還原后觸發的回調：攜帶一個參數，即當前層DOM
    restore: function(layero){
    },
});

 

無注釋

layer.open({
    type: 1,
    title: "標題",
    content: "內容/url",
    area: ['733px', '450px'],
    offset: 'auto',
    btn: ['按鈕1', '按鈕2'],
    closeBtn: 1,
    shade: 0.3,
    shadeClose: false,
    time: 0,
    maxmin: false,
    fixed: true,
    resize: true
    zIndex: 19891014,
    success: function(layero, index){
    },
    yes: function (index, layero) {
    },
    btn2: function (index, layero) {
        layer.close(index);
    },
    cancel: function(index, layero){
            layer.close(index);
        }
        return false;
    },
    end: function(){
    },
    full: function(layero){
    },
    min: function(layero){
    },
    restore: function(layero){
    },
});

 

官方文檔：https://www.layui.com/doc/modules/layer.html