解决layer弹层遮罩挡住窗体的问题


Posted in Javascript onAugust 17, 2018

使用代码:

<div>
   <div>这里面某个按钮触发弹层<div>
   <div id='dialog' hidden='hidden'></div>
</div>

如果上面的按钮触发了弹层 layer.open 且content是某个DOM元素

content:$('#dialog')

那么这里弹出层,遮罩会遮住到弹窗导致操作不了。

官网给出的说法是 如果弹层的内容content是某个DOM元素的话,要放在body的根节点下。不能放在div里面了。

我看了html代码,最后生成的遮罩DOM元素的位置是body的子级,所以知道弹层的DOM要和遮罩的DOM 要在同一层。

所以这里再弹层的success的事件里面进行了处理,将遮罩的DOM位置挪动了一下,和弹层DOM元素同一级,代码如下:

success:function(layero){
   var mask = $(".layui-layer-shade");
   mask.appenTo(layero.parent());
   //其中:layero是弹层的DOM对象
}

这样 弹层的遮罩DOM元素和弹层元素就在同一层了,就不会挡着弹层了。

以上这篇解决layer弹层遮罩挡住窗体的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
取得父标签
Nov 14 Javascript
js获取单选按钮的数据
Nov 27 Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
js友好的时间返回函数
Aug 24 Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 Javascript
浅谈Vue 自动化部署打包上线
Jun 14 Javascript
Vue Render函数创建DOM节点代码实例
Jul 08 Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 #Javascript
Vue组件创建和传值的方法
Aug 17 #Javascript
webpack多入口多出口的实现方法
Aug 17 #Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
Aug 17 #Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 #Javascript
vue+element的表格实现批量删除功能示例代码
Aug 17 #Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 #Javascript
You might like
thinkphp的静态缓存用法分析
2014/11/29 PHP
php实现微信公众平台账号自定义菜单类
2014/12/02 PHP
PHP从零开始打造自己的MVC框架之类的自动加载实现方法详解
2019/06/03 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
动态添加删除表格行的js实现代码
2014/02/28 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
js 轮播效果实例分享
2016/12/28 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
2017/08/02 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
python实现拓扑排序的基本教程
2018/03/11 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
C/C++ 笔试、面试题目大汇总
2015/11/21 面试题
旅游与环境专业求职信
2014/06/05 职场文书
干部外出学习心得体会
2016/01/18 职场文书
比较node.js和Deno
2021/04/27 Javascript