layui：弹出层弹出html页面的方式
程序员文章站
2022-05-06 09:41:15
...
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>
下一篇： layui弹出层