解决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 获取HTML DOM节点元素的方法小结
Apr 24 Javascript
JavaScript关于select的相关操作说明
Jan 13 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
Mar 13 Javascript
jQuery实现html元素拖拽
Jul 21 Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 Javascript
jquery实现的动态回到顶部特效代码
Oct 28 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
Aug 15 Javascript
手把手教你使用vue-cli脚手架(图文解析)
Nov 08 Javascript
vue-cli webpack2项目打包优化分享
Feb 07 Javascript
Vue 莹石摄像头直播视频实例代码
Aug 31 Javascript
微信小程序实现下拉加载更多商品
Dec 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
PHP传参之传值与传址的区别
2015/04/24 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
JS处理VBArray的函数使用说明
2008/05/11 Javascript
js 表格隔行颜色
2009/12/02 Javascript
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
javascript全局变量封装模块实现代码
2012/11/28 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
js动态设置div的值下例子
2013/10/29 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
详细讲解vue2+vuex+axios
2017/05/27 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
[01:45:05]VGJ.T vs Newbee Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
使用python和Django完成博客数据库的迁移方法
2018/01/05 Python
破解安装Pycharm的方法
2018/10/19 Python
python 用for循环实现1~n求和的实例
2019/02/01 Python
python验证身份证信息实例代码
2019/05/06 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
django创建简单的页面响应实例教程
2019/09/06 Python
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
惠普香港官方商店:HP香港
2019/04/30 全球购物
仓库保管员岗位职责
2013/12/20 职场文书
感谢信格式范文
2015/01/22 职场文书
劳资员岗位职责
2015/02/13 职场文书
三好学生个人总结
2015/02/15 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
个人维稳承诺书
2015/05/04 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript
Python中三种花式打印的示例详解
2022/03/19 Python