解决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 Event对象详解及使用示例
Nov 22 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
javascript如何写热点图
Dec 08 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
Dec 15 Javascript
如何判断Javascript对象是否存在的简单实例
May 18 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
微信小程序实现点击返回顶层的方法
Jul 12 Javascript
简单实现jQuery弹窗效果
Oct 30 jQuery
微信小程序项目实践之验证码倒计时功能
Jul 18 Javascript
微信小程序身份证验证方法实现详解
Jun 28 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
Sep 16 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
多文件上传的例子
2006/10/09 PHP
php 方便水印和缩略图的图形类
2009/05/21 PHP
几道坑人的PHP面试题 试试看看你会不会也中招
2014/08/19 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
php中file_exists函数使用详解
2015/05/08 PHP
WordPress中转义HTML与过滤链接的相关PHP函数使用解析
2015/12/22 PHP
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
Prototype 学习 工具函数学习($方法)
2009/07/12 Javascript
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
浅谈JavaScript中的作用域和闭包问题
2015/07/07 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
vue视频播放暂停代码
2019/11/08 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
python中的闭包用法实例详解
2015/05/05 Python
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
python 实现字符串下标的输出功能
2020/02/13 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
跟单业务员岗位职责
2014/03/08 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
四风之害观后感
2015/06/09 职场文书
学生病假条怎么写
2015/08/17 职场文书