正确使用Layui弹出层

正确使用Layui弹出层

开发工具与关键技术：MVC

作者：盘洪源

撰写时间：2019年6月16日星期天

在一些需要用到弹出层的页面，这个时候就可以用到layui.layer弹出层的一个使用，使用方法也很简单，但依然会有粗心的人会用错。我一开始用的时候也遇到这个错误，就是点开弹出层后，当你关闭弹出层的时候，弹出层里面的内容并没有隐藏掉，而是会追加到外面的主页面下面，这个就并不是我们想要的结果。

这种错误的可能原因就是你的layui的JS插件引错了

<script
src="~/Plugins/layui/dist/layui.js"></script>

<script
src="~/Plugins/layui/dist/layui.all.js"></script>

因为这两种用法不一样

这两个插件很容易混乱，如果需要引用的是

<script
src="~/Plugins/layui/dist/layui.js"></script>

我这里这个是通过点击按钮弹出弹出层的例子，弹出层里面的内容就需要自已在页面写好了，和平时写的html代码没什么区别，只要在最外层的div加上一个ID备用，然后设置display为none 就行，其他没什么不同的，然后就是JS部分了。

下面这个是一个简单的layui弹出层写法，里面的属性随各人需求，属性的用法这个就自已去layui官网看比较详细点，我这说也说不完。我这里就是点击按钮弹出弹出层，然后上下左右居中效果，content里面放的就是你的html弹出层的ID。

$("#Insert").click(function () {

            

           
layerIndex = layer.open({

               
type: 1,

               
area: ["500px", "500px"],

               
offset: "auto",

               
title: "商品信息编辑",

               
content: $("#ShopAdminis"),

               
resize: false

            });

        })

这里面需要用到的一个layer，这里也有可能出现一个错误，就是忘记在layui中使用layer

layui.use('layer', function () {

            var
layer = layui.layer;

        })

要是用第一个插件的这个代码就要写上，因为下面需要用到这个layer，反正写上就不会有错了。

相反如果用到第二个插件的就不需要这段代码也可以。至于为什么暂时还不知道，反正我就是这么用的。

就是两个插件用哪个都可以，只不过是用哪个就得有对应的步骤。