解决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 相关文章推荐
一个JavaScript继承的实现
Oct 24 Javascript
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
限制文本框输入N个字符的js代码
May 13 Javascript
jQuery 三击事件实现代码
Sep 11 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
Oct 21 Javascript
学习JavaScript设计模式之享元模式
Jan 18 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
May 16 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
js中less常用的方法小结
Aug 09 Javascript
Node.Js生成比特币地址代码解析
Apr 21 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 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与C#分别格式化文件大小的代码
2011/05/14 PHP
php模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
php 删除一个数组中的某个值.兼容多维数组!
2012/02/18 PHP
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
php中文验证码实现方法
2015/06/18 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
Jquery 扩展方法
2010/05/06 Javascript
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
javascript 中关于array的常用方法详解
2017/05/05 Javascript
详解angularjs获取元素以及angular.element()用法
2017/07/25 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
JavaScript经典案例之简易计算器
2020/08/24 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
Python获取apk文件URL地址实例
2013/11/01 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
python 实现任务管理清单案例
2020/04/25 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
劳力士官方珠宝商:J.R. Dunn Jewelers
2018/09/29 全球购物
军训自我鉴定100字
2014/02/13 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
关爱留守儿童标语
2014/06/18 职场文书
中学生自我评价2015
2015/03/03 职场文书
经典爱情感言
2015/08/03 职场文书
幼儿体育课教学反思
2016/02/16 职场文书