解决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 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
在Ubuntu系统上安装Node.JS的教程
Oct 15 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 Javascript
微信小程序 自定义消息提示框
Aug 06 Javascript
javascript字体颜色控件的开发 JS实现字体控制
Nov 27 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
node实现socket链接与GPRS进行通信的方法
May 20 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 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
关于我转生变成史莱姆这档事:第二季PV上线,萌王2021年回归
2020/05/06 日漫
ajax缓存问题解决途径
2006/12/06 PHP
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
php数组查找函数总结
2014/11/18 PHP
PHP判断用户是否已经登录(跳转到不同页面或者执行不同动作)
2016/09/22 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
php上传图片并给图片打上透明水印的代码
2010/06/07 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
举例简介AngularJS的内部语言环境
2015/06/17 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
JS实现图片旋转动画效果封装与使用示例
2018/07/09 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
2019/11/29 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
JavaScript中CreateTextFile函数
2020/08/30 Javascript
Python中关键字is与==的区别简述
2014/07/31 Python
Python实现多线程HTTP下载器示例
2017/02/11 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
学习Python列表的基础知识汇总
2020/03/10 Python
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
Html5与App的通讯方式详解
2019/10/24 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
建筑节能汇报材料
2014/08/22 职场文书
2014年教师节活动总结
2014/08/29 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
介绍信范文
2015/01/31 职场文书
用Python实现Newton插值法
2021/04/17 Python
Go遍历struct,map,slice的实现
2021/06/13 Golang