未命名.html

layer弹层组建使用说明

layer是一款近年来备受青睐的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。

官方地址：http://layer.layui.com/
官方文档：http://www.layui.com/doc/modules/layer.html

开始使用

分别引入Jquery文件和layer.js

<script type="text/javascript" src="https://libs.bsdev.cn/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://libs.bsdev.cn/layer/layer.js"></script>

Demo演示

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>New Document</title>
    <meta name="generator" content="EverEdit" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <script type="text/javascript" src="https://libs.bsdev.cn/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="https://libs.bsdev.cn/layer/layer.js"></script>
</head>
<body>
    <button id="test2">测试一下</button>
    <script>
    //弹出一个页面层
    $('#test2').on('click', function(){
      layer.open({
      type: 1,
      title:'测试标题',
      area: ['600px', '360px'],
      shadeClose: true, //点击遮罩关闭
      content: '\<\div style="padding:20px;">自定义内容\<\/div>'
      });
    });
    </script>
</body>
</html>

其它说明

更多参数请参考官方文档：http://www.layui.com/doc/modules/layer.html