解决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 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
Javascript仿PHP $_GET获取URL中的参数
May 12 Javascript
原生js的弹出层且其内的窗口居中
May 14 Javascript
JS实现输入框提示文字点击时消失效果
Jul 19 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 Javascript
如何防止INPUT按回车自动提交表单FORM
Dec 06 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
常见的浏览器Hack技巧整理
Jun 29 Javascript
详解JS数组Reduce()方法详解及高级技巧
Aug 18 Javascript
elementUI中Table表格问题的解决方法
Dec 04 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
JavaScript实现通讯录功能
Dec 27 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数组查找函数总结
2014/11/18 PHP
php使用curl打开https网站的方法
2015/06/17 PHP
php将文件夹打包成zip文件的简单实现方法
2016/10/04 PHP
PHP中“=&gt;
2019/03/01 PHP
laravel model模型处理之修改查询或修改字段时的类型格式案例
2019/10/17 PHP
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
jquery五角星评分插件示例分享
2014/02/21 Javascript
js获取url传值的方法
2015/12/18 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
2016/09/04 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
2017/03/23 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
解读ES6中class关键字
2017/11/20 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
JavaScript防止全局变量污染的方法总结
2018/08/02 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
Python中装饰器兼容加括号和不加括号的写法详解
2017/07/05 Python
对python中的高效迭代器函数详解
2018/10/18 Python
Python简单获取二维数组行列数的方法示例
2018/12/21 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
python 根据列表批量下载网易云音乐的免费音乐
2020/12/03 Python
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
财务管理专业应届毕业生求职信
2013/09/22 职场文书
求职信内容考虑哪几点
2013/10/05 职场文书
工厂保洁员岗位职责
2013/12/04 职场文书
结婚周年感言
2014/02/24 职场文书
贷款承诺书范文
2014/05/19 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书
初中地理教学反思
2016/02/19 职场文书
创业计划书之小型广告公司
2019/10/22 职场文书