二层弹出框，点掉小弹出框后，遮罩层没有消失

最新推荐文章于 2024-06-25 11:45:24 发布
最新推荐文章于 2024-06-25 11:45:24 发布
阅读量345 收藏 3
点赞数 4
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nss33678/article/details/139686575
版权

f2711ff42cea4e9c94fc5972284b487b.jpg

891cace3f33340e0a47222fd03ae4ab7.jpg 

40f5875a38da4ffdbfe23b5dfa3db1be.jpg 解决办法把

父元素的vue实例对象的，最后一个元素删除。删除的就是遮罩层元素

c435d830389749babb02faf5c94badf2.jpg 

 thus.$ refs.dialig.$ parent.$ el.lastChild. remove()

花生柿子
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-ui框架的el-dialog弹出框被遮罩层挡住了
知行合一，跬步致远
07-02 7万+
如图： 解决办法 在el-dialog标签里添加 :modal-append-to-body='false' 实现效果： 问题解析 先来看看element-ui官网提供的属性说明文档 文档解释：翻译成大白话就是，若el-dialog弹出框设置了modal-append-to-body='true'（默认）属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层d...
vue弹出框遮罩层_1、VUE - 遮罩弹框公共组件
weixin_42188512的博客
01-13 3626
一、需求描述有些项目会频繁用到下图这种类型的遮罩弹框，最好的方法是封装为公共的组件，直接复用。image.pngimage.png二、方法：1、子组件：遮罩弹框通过父组件传参，来显示组件内容和样式。且"返回"、"确定"显示的个数也是取决于父组件的传参决定。2、父组件点击事件：传参，决定子组件样式，且监控子组件的 “返回”、“确定” 事件，决定遮罩弹框的显示还是取消显示，以及下一步操作。三、上代码这...
VUE 多级dialog产生蒙版问题解决（弹出框被遮罩问题）
AmbroseLe
08-17 8857
问题是这样的   我的问题是在父组件里有个弹出框，弹出框里面调用了子组件，而子组件里点击图片显示大图（使用 弹出框形式）。当图片弹出框弹出的时候，就出现了最外层的一个蒙版，当然和层级肯定是有关的， 但是怎么设置z-index都不行。 最终解决方式。是在弹出框加一个      append-to-body     属性，因为第一 层弹出框没有被遮罩住，而第二层弹框被遮住了，所以...加了这个属...
html5弹出阴影遮罩_html5 弹出遮罩层
weixin_42538645的博客
02-23 1235
最近用phonegap在安卓手机中使用Html5+css3做页面，需求：在页脚导航按钮上，点击【同意】弹出一个页面，页面中是动态生成的单选按钮。代码：Html代码 收藏代码for="1">1"radio" name="a" id="1" value="1" />for="2">2"radio" name="a" id="2" value="2" />div>name=...
layui弹出框php,layui弹出层怎么使用
weixin_42342032的博客
03-26 621
layui弹出层的使用方法：首先引入jQuery1.8以上的任意版本；然后引入laery.js；最后通过“function show(){var a = layer.open({...});}”方式使用laery.open弹出层即可。本教程操作环境：Windows7系统、layui2.4&&jquery2.2.1版，Dell G3电脑。layer 在 layui 体系中的位置比较特...
小程序——遮罩层（自定义弹出框）的实现
OuOcnAh9
08-31 1775
参考资料1：微信小程序——自定义个性化模态框（附代码） 参考资料2：小程序自定义modal弹窗封装实现 小程序本身提供了wx.showModal的弹窗方式，但只局限于用户有两个选择的点击（比如说两个按钮时确定和取消），我们在多种信息的展示和选择的时候可以采用自定义弹窗的方式，效果如下： 这种自定义弹窗在点击叉号时可以关闭弹出框，可以在弹出框内进行checkbox的选择以及文字的输入，唯一的缺点是...
dialog 弹出框，遮罩层覆盖内容
AnlanJion的博客
08-16 2650
写完项目没太注意，并且情况是偶尔发生，点击dialog 的弹出框的时候，灰色遮罩层会覆盖内容上面， 这样的话可能是由于我们会发现浏览器遮罩层高于盒子遮罩层，会照成这样的问题，也有可能是我们给父元素加了定位元素 position|：fixed relative absolute 这样的话都可能会出现这样的问题， 解决方案，官网上也有，只不过可能没注意 那就是增加 <...
前端框架Layui学习五：弹出层和数据表格
zhengzaifeidelushang的博客
07-21 3282
layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，拿来即用。
html点击按钮弹出遮罩,jQuery点击按钮弹出遮罩层且内容居中特效
weixin_34268856的博客
05-31 865
本文为大家分享了jQuery点击按钮弹出遮罩层且内容居中的特效，下面来看最终实现的效果：由于是测试的程序，所以我未加关闭的按钮。一、主体程序弹出居中遮罩这里是主体内容这里是弹出的内容测试二、CSS样式*{margin: 0;padding: 0;}.testBg{position: absolute;top: 0;background-color: #000;filter:alpha(opacit...
layui 弹出层值回传解决方式
10-16
通过`layer.open()`函数可以创建弹出层，参数包括类型（type）、标题（title）、是否可关闭（shadeClose）、遮罩透明度（shade）、弹出层宽高（area）以及内容（content）等。例如： ```javascript layer.open({ ...
弹出一个遮罩层有正在加载效果的文字
09-25
在网页开发中，有时我们需要在用户等待某个操作完成或数据加载时向他们展示一个提示，这时弹出一个带有“正在加载”效果的遮罩层就显得尤为重要。这种效果可以提供良好的用户体验，让用户知道系统正在进行后台处理，...
点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码
09-04
在网页设计中，点击弹出层效果和弹出窗口后网页背景变暗是常见的交互设计手法，用于增强用户体验，提供更加聚焦的操作环境。这两种效果通常应用于弹窗对话框、模态框或者信息提示等场景。以下是对实现这些效果的代码...
ymprompt消息提示组件4.0【js插件弹出框美化版】
03-26
fixPosition：设定是否弹出框随滚动条一起浮动，保持在屏幕的固定位置，默认为true dragOut：设定是否允许拖出屏幕范围，默认为false。 autoClose：设定用户点击窗口中按钮后自动关闭窗口，默认为true（设定为...
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
01-19
功能：zhou en ce同学最近写了个基于jquery的信息弹出插件showInfoDialog，该插件对背景进行遮罩，然后弹出信息显示框，信息显示种类包括： 一、信息种类说明： 1.1、操作成功信息 1.2、错误信息 1.3、警告信息 ...
日常工作记录目录
与海
06-21 622
EasyExcel实现二维码下载与展示
前端 CSS 经典：文字描边
weixin_64684095的博客
06-24 262
文字描边有两种实现方式。
风水研究会官网源码系统-可展示自己的领域内容-商品售卖等
haojiehero123的博客
06-23 354
整洁大气，非常漂亮，前端内容均可通过后台修改。
SPECweb2009调优指南
最新发布
developersupport的博客
06-25 730
 SPECweb2009 是衡量 Web 服务器性能和能效的标准化基准，可以对 Web 服务器的并发数进行性能测试，评测 Web 服务器能够支持的最大同时连接数的客户端/服务器（每秒能够响应的最大请求数）。为充分利用服务器性能，提升SPECweb2009测试结果，可通过增大系统进程数、优化服务器软件参数、绑核以及优化参数等。
JS实现弹出框提示5秒后弹出框消失
05-13
2. 使用setTimeout函数设置一个定时器，让弹出框在5秒后消失。 3. 当定时器时间到达时，移除弹出框。 下面是示例代码： HTML部分： ``` <span class="close">× 这是一个弹出框提示！ ``` CSS部分...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值