當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

layui入门及弹出层

發布時間：2023/12/25 综合教程 33 生活家

生活随笔收集整理的這篇文章主要介紹了 layui入门及弹出层小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1.layui概述

layui（諧音：類UI) 是一款采用自身模塊規范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。其外在
極簡，卻又不失飽滿的內在，體積輕盈，組件豐盈，從核心代碼到 API 的每一處細節都經過精心雕琢，非常適合界面的快速開發。layui 首個版本
發布于 2016 年金秋，她區別于那些基于 MVVM 底層的 UI 框架，卻并非逆道而行，而是信奉返璞歸真之道。準確地說，她更多是為服務端程序員
量身定做，你無需涉足各種前端工具的復雜配置，只需面對瀏覽器本身，讓一切你所需要的元素與交互，從這里信手拈來。

2.導入插件

<link rel="stylesheet" href="../layui/css/layui.css"/>
<script type="text/javascript" src="../layui/layui.js"></script>

3.基礎代碼

layui.use('layer', function(){

var layer = layui.layer;

layer.msg('Hello World');

});

運行結果

1.最基本的消息框

type : 基本層類型,類型：Number，默認：0。可傳入的值有：0（信息框），1（頁面層），2（iframe層），3（加載層），4（tips層）。

如果想點擊一個框而不影響其他的彈出框，在頁面一般讓type為1。

layer.open({
    type:1,//0~4
    title:['提示信息']
})

2.消息提示框

括號里面的第一個是顯示的信息，后面的要顯示的圖標，數字不同代表的圖標不同。想顯示圖標時，默認皮膚可以傳入0-6，如果是加載層，可以傳入0-2。

layer.alert('酷斃了', {icon: 1});//顯示圖標0~6
layer.alert('酷斃了');//不顯示圖標
layer.load(1);//加載層0~2

layer.msg("我是消息彈框，我3秒后消失");

這個消息框顯示3秒鐘后會消失，默認是3秒。

可以自定義標題和內容的消息提示框：

　　　　　　　//單個使用
            layer.open({
                  skin: 'demo-class'
            });
            //全局使用。即所有彈出層都默認采用，但是單個配置skin的優先級更高
            layer.config({
                  skin: 'demo-class'
            })

//CSS 
body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
body .demo-class .layui-layer-btn a{background:#333;}
body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}
…
加上body是為了保證優先級。你可以借助Chrome調試工具，定義更多樣式控制層更多的區域。

以上代碼可以修改彈出層的樣式

2.1基礎彈框

layer.open({
    skin:'demo-class',//設置彈框樣式
    area:['260px','160px'],//彈框的大小（寬，高），默認：'auto'
    title:['信息提示框','15px'],//彈框的標題
    content: '恭喜你通過了英語四級考試'//顯示的消息內容
})

2.2兩個按鈕的彈框

layer.confirm("確定刪除嗎？",{
    btn2: function(index, layero){
        //按鈕【按鈕二】的回調
        alert("點擊了取消按鈕")
    }
},
function(index, layero){
  //按鈕【按鈕一】的回調
  alert("點擊了確定按鈕")
}
);

2.3自定義可禁止關閉按鈕的多按鈕彈框：

btn按鈕，信息框模式時，btn默認是一個確認按鈕，其它層類型則默認不顯示，加載層和tips層則無效。當您只想自定義一個按鈕時，你可以btn: '我知道了'，當你要定義兩個按鈕時，你可以btn: ['yes', 'no']。當然，你也可以定義更多按鈕，比如：btn: ['按鈕1', '按鈕2', '按鈕3', …]，按鈕1的回調是yes，而從按鈕2開始，則回調為btn2: function(){}，以此類推。如：

layer.open({
                content:'你了解layui嗎？',
                btn:['熟悉','了解','不清楚'],
                yes:function(index,layero){
                    alert("熟悉");
    　　                return false; //開啟該代碼可禁止點擊該按鈕來關閉窗口
                },
                btn2:function(index,layero){
                    alert("了解");
    　　                return false; //開啟該代碼可禁止點擊該按鈕來關閉窗口
                },
                btn3:function(index,layero){
                    alert("不清楚");
    　　                return false; //開啟該代碼可禁止點擊該按鈕來關閉窗口
                },
                cancel:function(index,layero){
                    //右上角關閉回調
                    return false;
                }
            })

2.4按鈕排列btnAlign

類型string 默認向右對齊“r”，“l”向左對齊，“c”居中對齊。

layer.open({
    btnAlign:'l',//設置靠左對齊
    skin:'demo-class',
    area:['260px','160px'],
    title:['信息提示框','15px'],
    content: '恭喜你通過了英語四級考試'
})

2.5關閉按鈕樣式closeBtn

類型string/Boolean，提供了兩種不同風格的關閉按鈕樣式，可通過1，2來設置，默認為1，如果不顯示,則可以設置為closeBtn:0.

layer.open({
           closeBtn:'0',
           btnAlign:'c',//設置靠左對齊
           skin:'demo-class',
           area:['260px','160px'],
           title:['信息提示框','15px'],
           content: '恭喜你通過了英語四級考試'
      })

2.6 shade遮罩

類型String，Array，Boolean，默認0.3，即彈層外區域，默認是0.3透明的黑色背景，如果你想定義別的顏色，可以shade: [0.8, '#393D49']；如果你不

想顯示遮罩，可以shade: 0

layer.open({
    shade:[0.8,'#00ff00'],//彈框外層是透明度為0.8的#00ff00顏色
    skin:'demo-class',
    area:['260px','160px'],
    title:['信息提示框','15px'],
    content: '恭喜你通過了英語四級考試'
})

2.7 是否點擊遮罩關閉shadeClose

類型Boolean，默認false，如果你的shade是存在的，那么你可以設定shadeClose來控制點擊彈層外區域關閉。

layer.open({
                shade:[0.1,'#00ff23'],
                shadeClose:true,
                closeBtn:'2',
                btnAlign:'c',//設置靠左對齊
                skin:'demo-class',
                area:['260px','160px'],
                title:['信息提示框','15px'],
                content: '恭喜你通過了英語四級考試'
            })

2.8設置自動關閉時間，time

類型Number，毫秒，默認：0，默認不會自動關閉。當你想自動關閉時，可以time: 5000，即代表5秒后自動關閉，注意單位是毫秒（1秒=1000毫秒）

layer.open({
    time: 5000,//5s后自動關閉
    skin:'demo-class',
    area:['260px','160px'],
    title:['信息提示框','15px'],
    content: '恭喜你通過了英語四級考試'
})

2.9 id用于控制彈框唯一標識

類型String，默認空字符，設置該值后，不管是什么類型的層，都只允許同時彈出一個（一般看到的是彈出位置最后的一個）。一般用于頁面層和iframe層模式。

layer.open({
    id:"open1",//設置id
    skin:'demo-class',
    area:['260px','160px'],
    title:['信息提示框','15px'],
    content: '恭喜你通過了英語四級考試'
})

2.10彈出動畫，anim

類型number，默認0，目前anim可支持的動畫類型有0-6如果不想顯示動畫，設置 anim: -1 即可。另外需要注意的是，3.0之前的版本用的是shift參數

0：平滑放大，默認 1：從上掉落 2：從最底部往上滑入 3：從左滑入

4：從左翻滾 5：漸顯 6：抖動

layer.open({
    anim:1,//設置出現的動畫效果
    skin:'demo-class',
    area:['260px','160px'],
    title:['信息提示框','15px'],
    content: '恭喜你通過了英語四級考試'
})

2.11關閉動畫isOutAnim

類型Boolean，默認：true，默認情況下，關閉層時會有一個過度動畫。如果你不想開啟，設置 isOutAnim: false 即可

2.12最大最小化maxmin

類型Boolean，默認：false，該參數值對type:1和type:2有效。默認不顯示最大小化按鈕。需要顯示配置maxmin: true即可

layer.open({
    type: 1,
    maxmin: true,//可調整大小化
    skin:'demo-class',
    area:['260px','160px'],
    title:['信息提示框','15px'],
    content: '恭喜你通過了英語四級考試'
})

2.13固定fixed

類型Boolean，默認：true，即鼠標滾動時，彈出層是否固定在可視區域。如果不想，設置fixed: false即可。

layer.open({
    fixed:false,//不固定彈出層
    anim:6,
    skin:'demo-class',
    area:['260px','160px'],
    title:['信息提示框','15px'],
    content: '恭喜你通過了英語四級考試'
})

2.14是否允許拉伸resize

類型Boolean，默認：true，默認情況下，你可以在彈層右下角拖動來拉伸尺寸。如果對指定的彈層屏蔽該功能，設置 false即可。該參數對loading、tips層無效

layer.open({
    resize:true,//可在右下角拉動
    anim:6,
    skin:'demo-class',
    area:['260px','160px'],
    title:['信息提示框','15px'],
    content: '恭喜你通過了英語四級考試'
})

2.15監聽窗口拉伸動作resizing

類型function，默認null，當你拖拽彈層右下角對窗體進行尺寸調整時，如果你設定了該回調，則會執行。回調返回一個參數：當前層的DOM對象

layer.open({
    skin:'demo-class',
    area:['260px','160px'],
    title:['信息提示框','15px'],
    content: '恭喜你通過了英語四級考試'，
     //當窗口拉伸時自動調用
     resizing:function(layor){
        console.log(layor);//這里會打印很多次，應該是改變一定的尺寸就會調用一次
    }
})

2.16是否允許瀏覽器出現滾動條scrollbar

類型：Boolean，默認：true，,默認允許瀏覽器滾動，如果設定scrollbar: false，則屏蔽。

layer.open({
　　scrollbar:false,//禁止瀏覽器出現滾動條
　　skin:'demo-class',
　　area:['260px','160px'],
　　title:['信息提示框','15px'],
　　content: '恭喜你通過了英語四級考試',
})

2.17設置彈框的位置坐標offset

offset: '100px'	只定義top坐標，水平保持居中	offset: ['100px', '50px']	同時定義top、left坐標
offset: 't'	設置頂部坐標（水平居中靠頂）	offset: 'r'	設置右邊緣坐標（垂直居中靠右）
offset: 'b'	設置底部坐標（水平居中靠低）	offset: 'l'	設置左邊緣坐標（垂直居中靠左）
offset: 'lt'	設置左上角（處于左上角）	offset: 'lb'	設置左下角（處于左下角）
offset: 'rt'	設置右上角（處于右上角）	offset: 'rb'	設置右下角（處于右下角）

layer.open({
　　offset: 't',
　　scrollbar:false,//禁止瀏覽器出現滾動條
　　skin:'demo-class',
　　area:['260px','160px'],
　　title:['信息提示框','15px'],
　　content: '恭喜你通過了英語四級考試',
})

2.18最大寬度、最大高度

maxWidth，類型：Number，默認：360。只有當area: 'auto'時，maxWidth的設定才有效。

layer.open({
    area:'auto',
    skin:'demo-class',
    content: '恭喜你通過了英語四級考試',
    maxWidth: 1000,//當內容寬度超過1000時才會換行
})

maxHeight，類型：Number，默認：無。只有當高度自適應時，maxHeight的設定才有效。

layer.open({
    area:'auto',
    skin:'demo-class',
    content: '恭喜你通過了英語四級考試',
    maxHeight: 100,//當內容高度超過100時會出現滾動條，如果設置了固定的高度也會出現這種情況
})

2.19層疊順序zIndex

類型：，默認：19891014（賢心生日 0.0）一般用于解決和其它組件的層疊沖突。

2.20 彈框拖拽

1）設置觸發拖動的元素

move，類型：String/DOM/Boolean，默認：'.layui-layer-title'。默認是觸發標題區域拖拽來移動彈框。如果想單獨定義，指向元素的選擇器或者DOM即可。如move: '.mine-move'。設定move: false來禁止拖。

layer.open({
    skin:'demo-class',
    content: '恭喜你通過了英語四級考試'，
    move:false,//禁止拖拽彈框
})

2）是否允許拖拽到窗口外

moveOut，類型：Boolean，默認：false。默認只能在窗口內拖拽，如果你想讓拖到窗外，那么設定moveOut: true即可。

layer.open({
    skin:'demo-class',
    content: '恭喜你通過了英語四級考試',
    moveOut:true,//允許拖到窗口外
})

3）拖動完畢后的回調方法

moveEnd，類型：Function，默認：null。默認不會觸發moveEnd，如果你需要，設定moveEnd: function(layero){}即可，其中layero為當前層的DOM對象。

layer.open({
    btn:['確定','取消'],
    type:1,
    skin:'demo-class',
    content: '恭喜你通過了英語四級考試',
    moveEnd:function(index,layero){//拖拽后執行的方法
        layer.open({
        skin:'demo-class',
        content: '你拖拽了彈框',
        });
    }
})

2.21

1）tips方向和顏色

類型：Number/Array，默認：2，tips層的私有參數。支持上右下左四個方向，通過1-4進行方向設定。如tips: 3則表示在元素的下面出現。有時你還可能會定義一些顏色，可以設定tips: [1, '#c00']

<body>
    <input type="text" id="id" />
</body>
<script>
layui.use(['layer'],function(){
    var layer=layui.layer;
    layer.tips('從下面顯示', '#id', {tips: [1,'#f0f']});
});
</script>

2）是否允許多個tips

tipsMore，類型：Boolean，默認：false。允許多個意味著不會銷毀之前的tips層。通過tipsMore: true開啟。

layer.tips('從下面顯示', '#id', {
    tips: [1,'#f0f'],
    tipsMore:true,
　}
);
layer.tips('從右面顯示', '#id',{tipsMore:true,});

3）層彈出后的成功回調方法success

success，類型：Function，默認：null。當你需要在層創建完畢時即執行一些語句，可以通過該回調。success會攜帶兩個參數，分別是當前層DOM、當前層索引。

layer.open({
    content: '測試回調',
    success: function(layero, index){
       console.log(layero, index);
    }
});

4）確定按鈕回調方法yes

yes，類型：Function，默認：null。該回調攜帶兩個參數，分別為當前層索引、當前層DOM對象。如：

layer.open({
  content: '測試回調',
  yes: function(index, layero){
    //do something
    layer.close(index); //如果設定了yes回調，需進行手工關閉
  }
});

5）右上角關閉按鈕觸發的回調cancel

cancel，類型：Function，默認：null。該回調攜帶兩個參數，分別為：當前層索引參數（index）、當前層的DOM對象（layero），默認會自動觸發關閉。如果不想關閉，return false即可。

layer.open({
  content: '測試回調',
  cancel: function(index, layero){ 
  if(confirm('確定要關閉么')){ //只有當點擊confirm框的確定時，該層才會關閉
    layer.close(index)
  }
  return false; 
}   
});

6）彈框銷毀后觸發的回調

end，類型：Function，默認：null，無論是確認還是取消，只要層被銷毀了，end都會執行，不攜帶任何參數。

layer.open({
    content: '測試回調',
    btn:['確定','取消'],
    yes:function(index,layero){
        return false;//確定按鈕禁止關閉彈框
    },
    end:function(){//彈框銷毀（關閉）后執行
        alert("彈框被銷毀啦")
    }
});

7）full/min/restore-分別代表最大化、最小化、還原后觸發的回調，類型：Function，默認：null。攜帶一個參數，即當前層DOM。

layer.open({
    content: '測試回調',
    btn:['確定','取消'],
    type:1,
    maxmin:true,
    full:function(layero){
        alert("點擊最大化時執行")
    },
    min:function(layero){
        alert("點擊最小化時執行")
    },
    restore:function(layero){
        alert("點擊還原時執行")
    }
});

2.22深入理解layer的用法

1）初始化全局配置 layer.config(options)

它不僅可以配置一些諸如路徑、加載的模塊，甚至還可以決定整個彈層的默認參數。

layer.config({
  anim: 1, //默認動畫風格
  skin: 'layui-layer-molv' //默認皮膚
  …
});

除此之外，extend還允許你加載拓展的css皮膚，如下：

layer.config({
   //如果是獨立版的layer，則將myskin存放在./skin目錄下
   //如果是layui中使用layer，則將myskin存放在./css/modules/layer目錄下
   extend: 'myskin/style.css'
});

2）初始化就緒，layer.ready

當你在頁面一打開就要執行彈層時，你最好是將彈層放入ready方法中，如：

//頁面一打開就執行彈層
layer.ready(function(){
  layer.msg('很高興一開場就見到你');
});

3）原始核心方法，layer.open（options）

不管是使用哪種方式創建層，都是走layer.open()，創建任何類型的彈層都會返回一個當前層索引，上述的options即是基礎參數。

var index=layer.open({
    content: '核心方法',
});
//可以通過layer.close(index)來關閉這個彈框

4）普通信息框，layer.alert（content, options, yes）

類似系統alert，但卻比alert更靈便。它的參數是自動向左補齊的。通過第二個參數，可以設定各種你所需要的基礎參數，但如果你不需要的話，直接寫回調即可。如

layer.alert("只顯示提示的內容");

layer.alert("有圖標的顯示內容",{icon:3})

layer.alert("我有回調，需點擊確定時執行",{icon:1},function(){
    console.log("點擊了確定，執行了回調")
})

5）詢問框layer.confirm(content, options, yes, cancel)

類似系統confirm，但卻遠勝confirm，另外它不是和系統的confirm一樣阻塞你需要把交互的語句放在回調體中。同樣的，它的參數也是自動補齊的。

//最完整的寫法，不過一般取消是不用的，可以省略
layer.confirm("確定刪除嗎？",{
      icon:3,
    },
    function(index){
        alert("點擊了確認");
    },
    function(index){
        alert("點擊了取消")
    }
);

也可以這樣寫，把取消按鈕放在options中，也可以在options中btn，換成自己的文字：

layer.confirm("確定刪除嗎？",{
        icon:3,
        //btn:['是','否'],
        btn2:function(index){
            alert("點擊了取消")
        }
    },
    function(index){
        alert("點擊了確認");
    },
);

最常用也是最簡單的方式如下：

layer.confirm("確定刪除嗎？",
    function(index){
        alert("點擊了確認");//do something
    },
);

6）提示框 layer.msg(content, options, end)

它占據很少的面積，默認會3秒后自動消失，堅持零用戶操作，參數也是自動補齊的。

layer.msg('只想弱弱提示');

layer.msg('有表情地提示', {icon: 6});

layer.msg("我還有回調方法",{
        icon:3,
        time:5000,//5秒后自動關閉,默認是3秒
    },
    function(){
    //添加關閉后執行的操作
    alert("關閉啦")
})

7）加載層layer.load(icon, options)

type:3的深度定制。load并不需要傳太多的參數，如果不喜歡默認的加載風格，還有選擇空間。icon支持傳入0-2。如果是0，無需傳，是默認的。load默認是不會自動關閉的，一般會在ajax回調體中關閉它。關閉使用layer.close(index);

var index = layer.load(1); //換成1的風格

var index = layer.load(2, {time: 10*1000}); //換2的方格，并且設定最長等待10秒，然后會自動關閉

8）tips層，layer.tips(content, follow, options)

type:4的深度定制。也是我本人比較喜歡的一個層類型，因為它擁有和msg一樣的低調和自覺，而且會智能定位，即靈活地判斷它應該出現在哪邊。默認是在元素右邊彈出

<input type="text" id="id" />

layer.tips('簡單版：這里輸入用戶信息', '#id');

在元素的事件回調體中執行，如果這樣使用，需要引入jquery：

$('#id').on('click', function(){
  var that = this;
  layer.tips('只想提示地精準些', that);
});

layer.tips('從下面顯示', '#id', {tips: 1;time:5000});

9）關閉特定層，layer.close(index)

關于它似乎沒有太多介紹的必要，唯一讓你疑惑的，可能就是這個index了吧。事實上它非常容易得到。

//當你想關閉當前頁的某個層時
var index = layer.open();
var index = layer.alert();
var index = layer.load();
var index = layer.tips();
//正如你看到的，每一種彈層調用方式，都會返回一個index
layer.close(index); //此時你只需要把獲得的index，輕輕地賦予layer.close即可

layer.closeAll(); //瘋狂模式，關閉所有層
layer.closeAll('dialog'); //關閉信息框
layer.closeAll('page'); //關閉所有頁面層
layer.closeAll('iframe'); //關閉所有的iframe層
layer.closeAll('loading'); //關閉加載層
layer.closeAll('tips'); //關閉所有的tips層

10）重新定義層的樣式，layer.style(index, cssStyle)

該方法對loading層和tips層無效。參數index為層的索引，cssStyle允許你傳入任意的css屬性

var index = layer.open();
//重新給指定層設定width、top等
layer.style(index, {
   '400px',
  top: '10px'
});

11）改變彈出層的標題 layer.title(title, index)

var index = layer.open();
layer.title("輸入信息",index)

12）獲取iframe頁的DOM，layer.getChildFrame(selector, index)*

layer.open({
  type: 2,
  content: 'iframe.html',//這里需要自定義頁面
  success: function(layero, index){
    var body = layer.getChildFrame('body', index);
    //得到iframe頁的窗口對象，執行iframe頁的方法：iframeWin.method();
    var iframeWin = window[layero.find('iframe')[0]['name']]; 
    console.log(bodt.html()) //得到iframe頁的body內容
    body.find('#id').val('Hi，我是從父頁來的')
  }
});

iframe頁面如下，

<body>
    輸入信息：<input type="text" class="layui-input" id="id" name='name' />
    <br>
    輸入信息：<input type="text" class="layui-input" id="id2" name='name2' />
</body>

13）獲取特定iframe層的索引 layer.getFrameIndex(windowName) *

此方法一般用于在iframe頁關閉自身時用到。

//假設這是iframe頁
var index = parent.layer.getFrameIndex(window.name); //先得到當前iframe層的索引
parent.layer.close(index); //再執行關閉

14）指定iframe層自適應 layer.iframeAuto(index) *

調用該方法時，iframe層的高度會重新進行適應

15）重置特定iframe url。layer.iframeSrc(index, url)*

16）置頂當前窗口 layer.setTop(layero)

當你的頁面有很多很多layer窗口，你需要像Window窗體那樣，點擊某個窗口，該窗體就置頂在上面，那么setTop可以來輕松實現。

17）手工執行最大小化 layer.full()、layer.min()、layer.restore() *

layer.open({
    btn:['最大化','最小化','還原'],
    context:'點擊按鈕呀',
    yes:function(index,layero){
          layer.full();
          return false;
    },btn2:function(index,layero){
          layer.min();
           return false;
    },btn3:function(index,layero){
          layer.restore();
           return false;
    }
});

18）tab層 layer.tab(options)

layer.tab({
  area: ['600px', '300px'],
  tab: [{
    title: 'TAB1', 
    content: '內容1'
  }, {
    title: 'TAB2', 
    content: '內容2'
  }, {
    title: 'TAB3', 
    content: '內容3'
  }]
});

#MySignature {
display: block;
background-color: #95FFE9;
border-radius: 7px;
box-shadow: 1px 1px 1px #6B6B6B;
padding: 10px;
line-height: 1.5;
text-shadow: 1px 1px 1px #FFF;
font-size: 16px;
}
#MySignature a {
margin: 0;
padding: 0;
display: contents;
}

一點點學習，一絲絲進步。不懈怠，才不會被時代所淘汰!

總結

以上是生活随笔為你收集整理的layui入门及弹出层的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。