layui：弹出层弹出html页面的方式

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>

来源：CSDN

作者：陈学俊

链接：https://blog.csdn.net/qq_36880027/article/details/104728726

标签

jquery弹出层

html代码

element