解决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 相关文章推荐
Jquery Change与bind事件代码
Sep 29 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
微信小程序 下拉菜单简单实例
Apr 13 Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
小程序图片长按识别功能的实现方法
Aug 30 Javascript
在vue项目中引入高德地图及其UI组件的方法
Sep 04 Javascript
vue组件之间的数据传递方法详解
Apr 19 Javascript
vue中datepicker的使用教程实例代码详解
Jul 08 Javascript
vue+axios实现post文件下载
Sep 25 Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 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
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
如何删除多级目录
2006/10/09 PHP
关于PHP语言构造器介绍
2013/07/08 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
Symfony的安装和配置方法
2016/03/17 PHP
PHP反射API示例分享
2016/10/08 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
sina的lightbox效果。
2007/01/09 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
js获取元素外链样式的方法
2015/01/27 Javascript
JS解析XML实例分析
2015/01/30 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
Bootstrap table使用方法记录
2017/08/23 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
Python3 模块、包调用&amp;路径详解
2017/10/25 Python
python微信跳一跳系列之色块轮廓定位棋盘
2018/02/26 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
python异常处理和日志处理方式
2019/12/24 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
python如何提升爬虫效率
2020/09/27 Python
CSS中越界问题的经典解决方案【推荐】
2016/04/19 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
2016/07/19 HTML / CSS
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
室内设计实习自我鉴定
2013/09/25 职场文书
酒店大堂副理的职责范文
2014/02/13 职场文书
《窗前的气球》教学反思
2014/04/07 职场文书
婚宴新娘致辞
2015/07/28 职场文书
Django如何创作一个简单的最小程序
2021/05/12 Python