解决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 相关文章推荐
js函数的延迟加载实现代码
Oct 11 Javascript
jQuery 三击事件实现代码
Sep 11 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
jQuery设置与获取HTML,文本和值的简单实例
Feb 26 Javascript
JavaScript类型系统之基本数据类型与包装类型
Jan 06 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
May 17 Javascript
微信小程序 canvas API详解及实例代码
Oct 08 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
JavaScript 闭包的使用场景
Sep 17 Javascript
详解ES6 中的Object.assign()的用法实例代码
Jan 11 Javascript
JS + HTML 罗盘式时钟的实现
May 21 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
利用PHP和AJAX创建RSS聚合器的代码
2007/03/13 PHP
什么是MVC,好东西啊
2007/05/03 PHP
Zend Framework中的简单工厂模式 图文
2012/07/10 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
JS面向对象、prototype、call()、apply()
2009/05/14 Javascript
JS模板实现方法
2013/04/03 Javascript
20条学习javascript的编程规范的建议
2014/11/28 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
微信js-sdk上传与下载图片接口用法示例
2016/10/12 Javascript
js实现tab切换效果
2017/02/16 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
Python实现模拟登录及表单提交的方法
2015/07/25 Python
Python中matplotlib中文乱码解决办法
2017/05/12 Python
python enumerate函数的使用方法总结
2017/11/15 Python
python查询mysql,返回json的实例
2018/03/26 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
python中pdb模块实例用法
2021/01/15 Python
python绘图模块之利用turtle画图
2021/02/12 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
简述数组与指针的区别
2014/01/02 面试题
综合测评自我鉴定
2013/10/08 职场文书
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
民生工程实施方案
2014/03/22 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers