正确使用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,反正写上就不会有错了。
相反如果用到第二个插件的就不需要这段代码也可以。至于为什么暂时还不知道,反正我就是这么用的。
就是两个插件用哪个都可以,只不过是用哪个就得有对应的步骤。