layui 弹出层使用 layer.open,content属性为dom元素,弹出层关闭后dom元素不会隐藏,解决方法
解决方法:content使用的dom元素样式自己设置为隐藏 style="display: none;"
1 定义弹出层content使用的dom元素
<div id="sku_search-div" style="display: none;"> <form class="layui-form" lay-filter="sku_search-div-form" action="" method="post" enctype="multipart/form-data"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">搜索类型</label> <div class="layui-input-inline"> <select name="sku_search_type" lay-verify="required"> <option value="0">全部</option> <option value="1">sku编号</option> <option value="2">颜色</option> <option value="3">尺码</option> </select> </div> </div> </div> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">搜索值</label> <div class="layui-input-inline"> <input type="text" name="sku_search_value" id="sku_search_value" autocomplete="off" class="layui-input" value=""> </div> </div> </div> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label"></label> <button type="button" class="layui-btn" lay-submit lay-filter="sku_search-div-form">搜索</button> </div> </div> </form> </div>
弹出层使用的dom元素id为“sku_search-div”,这里的关键点是样式设置为隐藏 style="display: none;",因为该dom元素只显示在弹出层里,不能使用layui内置的样式 class="layui-hide",否则弹出层内容为空
2 使用layer.open弹出层
sku_search_index = layer.open({ type: 1, area: ['20%', '30%'], title: 'sku搜索', content: $('#sku_search-div') //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响 , cancel: function (index, layero) { //$("#sku_search-div").css({ "display": "none" }) } , shade: false //, time: 3000 });
content属性设置为指定的dom
3 弹出层表现如下
layui官方文档链接