html代碼復制可直接使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://www.layui.com/admin/std/dist/layuiadmin/layui/css/layui.css">
<script type="text/javascript" src="https://www.layui.com/admin/std/dist/layuiadmin/layui/layui.js"></script>
</head>
<body>
<button class="layui-btn" id="btn1">點擊按鈕彈窗</button>
<button class="layui-btn" id="btn2">alert彈窗</button>
<button class="layui-btn" id="btn3">confirm彈窗</button>
<button class="layui-btn" id="btn4">open-type=0[默認]</button>
<button class="layui-btn" id="btn5">open-type=1[頁面層]</button>
<button class="layui-btn" id="btn6">open-type=2[iframe層]</button>
<button class="layui-btn" id="btn7">open-type=4[tips層]</button>
<button class="layui-btn" id="btn8">[tips層]</button>
</body>
<div id="content" style="background-color: #00bfbf;height: 100%;width: 100%;display: none">type=2的open彈出層</div>
<script>
layui.use(['layer','jquery'],function () {
// 定義使用jquery和layer
var $ = layui.jquery;
var layer = layui.layer;
// 彈窗
$("#btn1").click(function () {
layer.msg("彈出層",{icon:1});
})
$("#btn2").click(function () {
// 普通彈出層
// layer.alert("alert 彈出層");
// 彈出帶圖標的
layer.alert("帶圖標的alert彈出層",{icon:4});
})
$("#btn3").click(function () {
layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
// 這里可以寫點擊確定以后的回調方法比如:
// alert("這是點擊確定以后的回調方法" );
// 或者直接跟layui的彈窗
layer.msg("這是點擊確定以后的回調方法",{icon:1});
layer.close(index);//關閉彈窗
});
})
// open核心方法彈出層
// type 類型為0
$("#btn4").click(function () {
layer.open({
type:0,
// content:"默認彈出信息框[type=0]"
// 除了默認文字提示以外還可以跟html代碼如:
content:"<p style='color: red'>默認彈出層樣式</p>",
// 還可以添加圖標屬性
icon:1,
// title為標題屬性
title:"標題屬性",
// skin為彈出層的樣式皮膚如:
skin:"layui-layer-lan",
// area為彈出層的寬高屬性
area:['300px','200px'],
// 設置坐標用offset屬性['top','left'] auto 為默認垂直水平居中 r為靠右 l為靠左 t靠頂部 b靠下(規則為:先左右后上下)
offset:['200px','100px'],
// offset:'rt',
// 關閉按鈕樣式
closeBtn:1,//0為不顯示,1默認,2帶有樣式
// shade為彈出層的遮罩屬性shade['透明度','顏色']
shade:['0.1','black'],
// 點擊遮罩層關閉彈出層屬性true為是false為否
shadeClose:true,
// time為延時關閉0為不關閉,后面可以跟毫秒數
time:'2000',
// anim為動畫屬性后面跟屬性1,2,3,4
// anim: 0 平滑放大。默認
// anim: 1 從上掉落
// anim: 2 從最底部往上滑入
// anim: 3 從左滑入
// anim: 4 從左翻滾
// anim: 5 漸顯
// anim: 6 抖動
anim:'6',
// 顯示窗口最大化最小化;其對應的彈出層type值為1,2有效
// maxmin:true,
})
})
// type類型為1
$("#btn5").click(function () {
layer.open({
type:1,
// type為1可以使用選擇器必須將內容層寫到body外面;type為0只能使用字符安拼接的標簽如:
content:$("#content"),
area:["300px","300px"],
maxmin:true,
// time:2000,
// 按鈕btn屬性作為彈出層的按鈕;從而去觸發另一個事件
btn:['確定','重置','取消'],
// 按鈕居中用btnalign其值為c(居中),l(居左),r(居右)
// btnAlign:'c',
// 為按鈕綁定事件
// 按鈕一綁定事件方法如下:
yes: function(index, layero){
layer.msg("按鈕確定的回調");
},
// 按扭二的回調
// 按鈕三和按鈕二用同樣的方法,綁定事件以此類推
btn2: function(index, layero){
layer.msg("按鈕重置的回調方法")
},
btn3: function(index, layero){
layer.msg("按鈕取消的回調方法")
// 當return false 時點擊按鈕就不會關閉彈出層
return false
},
// 右上角x按鈕關閉的回調
cancel: function(){
//右上角關閉回調
layer.msg("右上角關閉按鈕的回調")
//return false// 開啟該代碼可禁止點擊該按鈕關閉
}
})
})
// type為2的open核心彈出層(iframe彈出層)
$("#btn6").click(function () {
layer.open({
// 當type為2的時候content必須為url
type:2,
// content:'layer.tanchuang.html',
// content除了內部鏈接以外也可以使用外部鏈接如:
content:"http://www.baidu.com",
// 如果想去除滾動條可以使用這種樣式
// content:["http://www.baidu.com",'no'],
area:['1200px','500px'],
})
})
// type為3的open核心彈出層
// tips類型為吸附層多用於教學提示
$("#btn7").click(function () {
layer.open({
type:4,
content:["這是type=4的tips彈出層樣式","#btn7"],
shadeClose:true,
// tips是屬性為吸附層內容顯示在元素的位置;如tips:1在元素下面
tips:1,
})
})
// 以下也是一種吸附層的彈出
$("#btn8").click(function(){
layer.tips('只想提示地精准些', '#btn8');
})
});
</script>
</html>
原文來自於：https://www.cnblogs.com/lxc-bky/p/10064331.html