解决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二维数组定义和初始化的三种方法总结
Mar 03 Javascript
JavaScript中的对象序列化介绍
Dec 30 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
微信开发 js实现tabs选项卡效果
Oct 28 Javascript
jquery dataview数据视图插件使用方法
Dec 23 Javascript
js模拟支付宝密码输入框
Apr 11 Javascript
浅谈Node Inspector 代理实现
Oct 19 Javascript
vue中的router-view组件的使用教程
Oct 23 Javascript
JS window对象简单操作完整示例
Jan 14 Javascript
JavaScript 空间坐标的使用
Aug 19 Javascript
JavaScript的function函数详细介绍
Nov 20 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
咖啡界又出新概念,无需咖啡豆的分子咖啡
2021/03/03 咖啡文化
实现php加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
php date与gmdate的获取日期的区别
2010/02/08 PHP
php使用curl_init()和curl_multi_init()多线程的速度比较详解
2018/08/15 PHP
javascript 模拟点击广告
2010/01/02 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
将json转换成struts参数的方法
2016/11/08 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
2017/09/18 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
浅谈vue权限管理实现及流程
2020/04/23 Javascript
Python如何生成树形图案
2018/01/03 Python
python使用多进程的实例详解
2018/09/19 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
python实现两张图片的像素融合
2019/02/23 Python
pywinauto自动化操作记事本
2019/08/26 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
html5开发三八女王节表白神器
2018/03/07 HTML / CSS
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
包装类的功能、种类、常用方法
2012/01/27 面试题
敏捷开发的主要原则都有哪些
2015/04/26 面试题
高中生校园生活自我评价
2013/09/19 职场文书
合作协议书范文
2014/08/20 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
前台岗位职责
2015/02/13 职场文书
升职自荐信范文
2015/03/27 职场文书
JavaScript实现两个数组的交集
2022/03/25 Javascript
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python