解决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 &amp; DHTML 实例编程(教程)DOM基础和基本API
Jun 02 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
Jan 08 Javascript
查看大图功能代码jquery版
Nov 05 Javascript
Node.js(安装,启动,测试)
Jun 09 Javascript
使用node.js 获取客户端信息代码分享
Nov 26 Javascript
js动态切换图片的方法
Jan 20 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
vue省市区三联动下拉选择组件的实现
Apr 28 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
May 28 Javascript
Vue Element UI自定义描述列表组件
May 18 Vue.js
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
example2.php
2006/10/09 PHP
Get或Post提交值的非法数据处理
2006/10/09 PHP
php生成zip压缩文件的方法详解
2013/06/09 PHP
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
2018/03/13 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
python生成词云的实现方法(推荐)
2017/06/13 Python
python人民币小写转大写辅助工具
2018/06/20 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
python的等深分箱实例
2019/11/22 Python
Python实现名片管理系统
2020/02/14 Python
numpy库reshape用法详解
2020/04/19 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
python 实现数据库中数据添加、查询与更新的示例代码
2020/12/07 Python
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
对祖国的寄语大全
2014/04/11 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python
KVM基础命令详解
2022/04/30 Servers