Layer弹出框

Layer弹出框

开发工具与关键技术：Visual Studio 2015
作者：徐晶旗
撰写时间：2019年6月8日 

layer 是一款使用非常方便且功能强健的 jQuery 弹出层插件，对各类浏览器中的兼容性也很好。使用它可以创建出交互体验更好的 Web 应用程序。layer 提供了信息框、询问框、页面层、iframe 和 tips 等多种展示方式，今天我要讲的就是用layer弹出页面层。首先到相应的位置引用css插件和js插件

@*css插件*@
<link href="~/Plugins/layui/css/layui.css" rel="stylesheet" />
@*js插件*@
<script src="~/Plugins/layui/layui.js"></script>
<script src="~/Plugins/layui/layui.all.js"></script>

注：这上面两个js插件只要引用一个即可，看个人喜好，不过用layui.js插件要到js代码中加载一下模块，要不然模态框就弹不出来，如果用layui.all.js则不需要加载模块，因为它有内置模块，所以不需要另外去加载它，不过layui.js插件中内置的功能多一点，所以我一般喜欢用它。
下面代码是加载模块的方法。

   $(function () {
            layui.use('layer', function () {
            })
        });     

然后找到要弹出模态框的位置给它绑定一个id

<li>
<a href="JavaScript:;" id="Yonghuquanxian">用户及权限设定</a>
</li>   

再到这个要弹出的模态框的内容部分给它一个id值，这个id值里面的内容就是模态框中的内容，因代码内容部分较多，所以到这里只展示一部分代码了?

  <div id="listen">
          <div class="header layui-col-sm12">
                <div class="cute layui-col-sm1">
                    <div style="border: 1px solid #f8f8ff;">
                        <a href="#">
                            <img src="~/Content/img/10000001.JPG" /><br> <b>添加</b>
                        </a>
                    </div>
                </div>
                <div class="cute layui-col-sm1 ">
                    <div style="border: 1px solid #f8f8ff;">
                        <a href="#">
                            <img src="~/Content/img/10000009.JPG" /><br> <b>修改</b>
                        </a>
                    </div>
                </div>
                <div class="cute layui-col-sm1">
                    <div style="border: 1px solid #f8f8ff;">
                        <a href="#">
                            <img src="~/Content/img/10000003.JPG" /><br> <b>保存</b>
                        </a>
                    </div>
                </div>
                <div class="cute layui-col-sm1">
                    <div style="border: 1px solid #f8f8ff;">
                        <a href="#">
                            <img src="~/Content/img/66.JPG" /><br> <b>取消</b>
                        </a>
                    </div>
                </div>
                <div class="cute layui-col-sm1">
                    <div style="border: 1px solid #f8f8ff;">
                        <a href="#">
                            <img src="~/Content/img/10000027.JPG" /><br> <b>删除</b>
                        </a>
                    </div>
                </div>
                <div class="cutes layui-col-sm2">
                    <div id="Power"style="border: 1px solid #f8f8ff;">
                        <a href="#">
                            <img src="~/Content/img/68.JPG" /><br> <b>权限设定</b>
                        </a>
                    </div>
                </div>
            </div>
</div>

然后就要写点击绑定的id值弹出模态框的方法，首先是写layer.open弹出模态框，然后到title中写模态框的表头内容，再写type的类型值，layer提供了5种层类型.可传入的值有: 0(信息框,默认), 1(页面层),2(ifram层),3(加载层),4(tips层)。若采用layer.open(type:1)方式调用，则type为必填项（信息框除外），所以我到这里要弹出页面层就要设置type的值为1,然后content后面的是拼接的内容部分，area后面写的是模态框的宽和高。到这里这个弹出模态框就完成了?

$("#Yonghuquanxian").click(function () {
            layer.open({
                title: '<div class="col-lg-12" style="height:30px;" id="tops"> <div class="wram text-left"><img src="/Content/img/icon.png" /><b>用户管理</b> </div></div>',
                type: 1,
                content: $('#listen'),
                area: ['800px', '480px']
            });

执行代码后的图片如下,点击用户及权限设定,不管当前在哪个页面都能弹出这个模态框