layui彈出層的詳細頁面，除了在文檔中有一些示例以外，更多的可以閱讀獨立網站：http://layer.layui.com/。
下面以點擊按鈕1彈出一個表單填寫頁面爲例：
layui.use(['element','jquery','layer'], function(){
var $ = layui.jquery;
var element = layui.element;
var layer = layui.layer;
//alert
$("#btn1").click(function(){
//input here
layer.open({
type: 2,
title: '請填寫表單',
shadeClose: true,
shade: 0.8,
area: ['580px', '90%'],
shadeClose: false,
content: 'Demo3-6.html' //iframe的url
});
//input above
});
});
使用之前，先引入layer框架。首先監聽btn1的按鈕事件，點擊時，open一個窗口，area爲彈出窗口的大小，content爲需要彈出的html頁面的url。shadeClose爲trues時，點擊非彈出框的其他地方，彈出框消失。
完整例程
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 後臺大布局 - Layui</title>
<link rel="stylesheet" type="text/css" href="./layui/css/layui.css">
<style type="text/css">
.layer-photos-demo{margin:10px 0;}
.layer-photos-demo img{width: 160px; height: 100px;}
</style>
</head>
<body class="layui-layout-body">
<button class=layui-btn id=btn1>一個按鈕</button>
<button class=layui-btn id=btn2>一個按鈕</button>
<button class=layui-btn id=btn3>一個按鈕</button>
<!-- script部分 -->
<script src="./layui/layui.js"></script>
<script>
//JavaScript代碼區域
layui.use(['element','jquery','layer'], function(){
var $ = layui.jquery;
var element = layui.element;
var layer = layui.layer;
//alert
$("#btn1").click(function(){
//input here
layer.open({
type: 2,
title: '請填寫表單',
shadeClose: true,
shade: 0.8,
area: ['580px', '90%'],
shadeClose: false,
content: 'Demo3-6.html' //iframe的url
});
//input above
});
});
</script>
</body>
</html>