1.彈出層依賴模塊
layui.use('layer',function(){
var layer = layui.layer;
})
2,彈出層方法 open()
open（）會根據type屬性值的不同彈出不同的層
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css" />
<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
<button id="btn01" class="layui-btn layui-btn-lg">type默認值爲0信息彈出框</button><br />
<button id="btn02" class="layui-btn layui-btn-lg">type值爲1頁面層可以在conten中編寫html</button><br />
<button id="btn03" class="layui-btn layui-btn-lg">type值爲2 iframe層可以通過content獲取一個頁面</button><br />
<button id="btn04" class="layui-btn layui-btn-lg">type值爲3 加載層</button><br />
<button id="btn05" class="layui-btn layui-btn-lg">type值爲4 tips層content中有兩個值['提示內容','提示元素']</button>
</body>
</html>
<script>
layui.use('layer', function() {
var layer = layui.layer;
var $ = layui.jquery;
$('#btn01').on('click', function() {
layer.open({
content: "信息框",
time: 1000
})
})
$('#btn02').on('click', function() {
layer.open({
type: 1,
content: "<p>我是p標籤,可以在這裏用html編寫頁面/p>",
time: 1000
})
})
$('#btn03').on('click', function() {
layer.open({
type: 2,
content: 'https://www.layui.com/doc/modules/layer.html#type',
time: 1000
})
})
$('#btn04').on('click', function() {
layer.open({
type: 3,
time: 1000
})
})
$('#btn05').on('click', function() {
layer.open({
type: 4,
content: ['內容', '#btn05'],
time: 1000
})
})
})
</script>
3.open的常用屬性
layer.open({
type:2 默認消息框
,
title:'我是彈出層'//彈出層標題
,
content:'https://www.layui.com/doc/modules/layer.html#type'//顯示內容
,
icon:1 //layui提供了六種圖標
,
offset:['500px','500px']//彈出框出現的位置
,
area:['200px','200px']
,
btn:['ye','no']//爲彈出框添加按鈕，中括號中，有多少個字符串就生成多少個按鈕
,
btnAlign:'r'//btnAlign彈出框按鈕的排序有三個值 ‘l’靠左 ，‘c’居中，‘r’靠右 默認值爲‘r’
,
shade:0.2 //shade遮罩的值是控制彈出框以外的頁面部分顏色的深淺 其作用是彈出框以外的部分無法被操作
,
shadeClose:true//shadeClose關閉遮罩 其作用是可以是使彈出框以外的部分可被操作
,
time:200000//彈出層自動銷燬時間
,
anim:4 //彈出動畫0到6七種動畫
,
maxmin:true//允許最大最小化只對type值 1 2 起作用
,
btn1:function(){//監聽第一個按鈕事件
layer.close()
},
btn2:function(){//監聽第二個按鈕事件以此類推
layer.msg('2')
},
yes:function(){//監聽第一個按鈕的事件優先級要高於btn1
// layer.msg(layer.index)獲取當前彈出層的index 它獲取的始終是最新彈出的某個層的idndex
// layer.close(layer.index)
//關於關閉層的內置方法
// layer.closeAll()//關閉所有層
// layer.closeAll('dialog'); //關閉信息框
// layer.closeAll('page'); //關閉所有頁面層
// layer.closeAll('iframe'); //關閉所有的iframe層
// layer.closeAll('loading'); //關閉加載層
// layer.closeAll('tips'); //關閉所有的tips層
layer.title('改變了標題',layer.index-1)
}
,
success:function(){//彈出框彈出時執行的方法
// layer.msg('ok')
}
,
cancel:function(index,layero) {//點擊右上角×號執行的事件
layer.msg('右上角❌號')
}
,
resize:true//是否允許被拉伸 右下角
})
4.layui還提供了其它方式的彈出框
代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css" />
<script type="text/javascript" src="layui/layui.js" ></script>
</head>
<body>
<button id="btn01" class="layui-btn layui-btn-danger">layer.mag提示</button>
<button id="btn02" class="layui-btn layui-btn-danger">layer.alert信息框</button>
<button id="btn03" class="layui-btn layui-btn-danger">layer.confirm詢問框</button>
<button id="btn04" class="layui-btn layui-btn-danger">layer.load()加載</button>
<button id="btn05" class="layui-btn layui-btn-danger">layer.tips() tips框</button>
</body>
<script>
layui.use('layer',function(){
var layer = layui.layer;
var $ = layui.jquery;
$('#btn01').on('click',function(){
layer.msg('提示',{icon:1})//open的屬性在這裏一樣適用
})
$('#btn02').on('click',function(){
layer.alert('提示',{icon:2})
})
$('#btn03').on('click',function(){
layer.confirm('我是詢問框',{icon:3})
})
$('#btn04').on('click',function(){
layer.load()
})
$('#btn05').on('click',function(){
layer.tips('你好','#btn05')
})
})
</script>
</html>
<SCRIPT Language=VBScript><!--
//--></SCRIPT>