解决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图片自动或手动切换示例附演示源码
Sep 04 Javascript
JavaScript cookie的设置获取删除详解
Feb 11 Javascript
JavaScript中对象property的读取和写入方法介绍
Dec 30 Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 Javascript
jquery代码实现多选、不同分享功能
Jul 31 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
js图片轮播手动切换效果
Nov 10 Javascript
基于jQuery实现照片墙自动播放特效
Jan 12 Javascript
使用JavaScript实现链表的数据结构的代码
Aug 02 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
Dec 23 Javascript
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
JS使用new操作符创建对象的方法分析
May 30 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中设置多级目录session的问题
2011/08/08 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
Laravel日志用法详解
2016/10/09 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
2008/12/19 Javascript
JS定时器实例
2013/04/17 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
js实现分享到随页面滚动而滑动效果的方法
2015/04/10 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
js cookie实现记住密码功能
2017/01/17 Javascript
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
简单实现python数独游戏
2018/03/30 Python
Python2实现的图片文本识别功能详解
2018/07/11 Python
python numpy 按行归一化的实例
2019/01/21 Python
css3圆角边框和边框阴影示例
2014/05/05 HTML / CSS
大学生求职中的自我评价
2013/10/01 职场文书
社区庆八一活动方案
2014/02/02 职场文书
大二学生职业生涯规划书
2014/02/05 职场文书
旅游管理专业大学生职业规划书
2014/02/27 职场文书
《放飞蜻蜓》教学反思
2014/04/27 职场文书
人才市场接收函
2015/01/30 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
laravel ajax curd 搜索登录判断功能的实现
2021/04/17 PHP
golang 如何用反射reflect操作结构体
2021/04/28 Golang
Oracle用户管理及赋权
2022/04/24 Oracle