解决elementui关闭子弹窗，遮罩层挡住父弹窗问题

最新推荐文章于 2024-05-31 16:00:38 发布

我谈山美，我说你媚

最新推荐文章于 2024-05-31 16:00:38 发布

阅读量691

点赞数 9

文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/m0_69853343/article/details/134979503

版权

1.在父弹窗中设置 :modal-append-to-body="false" 和 :append-to-body="true"

<el-dialog title="父弹窗" :visible.sync="dialogVisible" 
:modal-append-to-body="false"  append-to-body>
  <!-- 弹窗内容 -->
</el-dialog>

2.在子弹窗中设置 :append-to-body="true"


<el-dialog title="子弹窗" :visible.sync="dialogVisible"  append-to-body>
  <!-- 弹窗内容 -->
</el-dialog>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

我谈山美，我说你媚

关注关注

9
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

ElementUI（全局｜局部）禁止点击遮罩层关闭el-dialog弹窗

qq_44711316的博客

10-26

2708

第一种：全局禁止点击遮罩层关闭el-dialog弹窗在main.js里面： import ElementUI from 'element-ui'; ElementUI.Dialog.props.closeOnClickModal.default = false 第二种：局部单独给某个dialog设置禁止点击遮罩层关闭el-dialog弹窗 <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" :

dialog弹窗关不掉 vue_elementUI弹窗之坑（dialog的遮罩层在弹出层的上面，子弹窗执行保存（确定）按钮之后还要执行取消按钮，Prop being mutated: "showTre...

weixin_30539747的博客

12-24

3485

本文主要解决elementUI弹窗嵌套中的坑,笔者在给同事解决难听过程看到了三个问题：弹窗套弹窗出现蒙层、弹窗套弹窗，子弹窗执行保存(确定)按钮之后还要执行取消按钮、弹窗自带关闭x按钮报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent compone...

1 条评论您还未登录，请先登录后发表或查看评论

elementui dialog关闭遮罩还在---已解决

沙漏的前端笔记

04-18

6152

element UI dailog关闭但是遮罩未关闭---已解决

element ui 弹窗遮罩层在弹出层的上面。点击关闭弹窗弹窗关闭了但是遮罩层没关

热门推荐

肖肖肖丽珠的博客

04-01

1万+

首先弹窗一个水平测试报告。然后点击查看解析又可以弹窗一个框这时我们发现这个解析的框被外面一个遮罩层挡住了。我把这个水平测试报告的弹窗写在一个组件里面。在组件里面又写了解析的弹窗。首先查看官网的element-ui的el-dialog的一些属性首先想到是遮罩层的问题所以试了一下在解析的弹窗上加上:modal-append-to-body="false" ...

ElementUI ---- dialog点击取消后蒙遮层不消失

2301_81772570的博客

05-31

714

我的场景：页面A打开了 dialog，然后点击页面A dialog 的确定按钮跳转到页面B，并且打开页面B的 dialog。但是页面B的 dialog 关闭后，蒙遮层并没消失（已经设置了 :append-to-body="true"）解决：页面A 跳转到页面B 的时候，记得先把页面A的 dialog 关闭！最后发现：页面B的 dialog 蒙遮层用的是页面A的，o(╥﹏╥)o。

iframe子页面弹出框遮罩层问题的解决方法

zhuyin365的博客

07-03

2514

做项目出现的问题：两个页面：主页面：包含html 和 js。子页面：包含html。目标：想要在主页面的某元素后显示子页面的元素，所以在主页面的 js 中，使用嵌套 iframe 的方式，将子页面嵌套在主页面中（子页面中有个弹框的操作），但出现了下面的问题：问题：（弹框在子页面，弹出时遮罩层只是遮住子页面，没有全屏，并且弹框的上面一部分被主页面遮盖了）解决方案：将弹...

elementui弹出框被遮罩层挡住的问题

nss33678的博客

03-28

1072

2，:modal-append-to-body='false'或者:append-to-body='true'，改变他的这个属性就好。但是遮罩层的范围会变。1，el-dialog直接放在组件最外层div中，就不会出现遮罩问题。偶然发现有个页面会出现这种问题，有两个解决方法。

老生常谈遮罩层 滚动条的问题

11-23

今天遇到的问题是，在弹出层后面的 遮罩层，因为有滚动条，导致滚动条下面不可视区域没有遮罩层，解决方式是加的css。 js代码 [removed] //显示灰色JS遮罩层 function showBg(ct,content){ var bH=$(document)....

解决 element-ui 抽屉弹窗、弹窗、气泡弹窗、消息弹窗、确认弹窗【el-drawer、el-dialog、el-popover、$message、$confirm】的 遮罩层z-index问题

ylnzzl的博客

10-28

5009

解决 element-ui 抽屉弹窗、弹窗、气泡弹窗、确认弹窗【el-drawer、el-dialog、el-popover、$confirm】的 遮罩层z-index问题

页面点击按钮后出现遮罩层，遮罩层上面有其他内容可显示，包含关闭遮罩层按钮

06-04

点击按钮弹出悬浮层，层上有数据且可以关闭页面点击按钮后出现遮罩层，遮罩层上面有...所以选择弹出层，一层遮罩层，一层显示详情层，遮罩层的好处可以让用户在看详情的时候不能操作页面其他位置，防止页面出现错误。

解决elementui多层dialog弹窗遮罩问题

Let_me_tell_you的博客

06-07

3544

多层弹窗，会出现遮罩问题，需要鼠标点击一下才能进入当前顶层弹窗正常使用状态。效果图如下：解决办法：在弹窗代码上加上解决问题。

项目中elementUI的dialog遇到的小bug 点击遮罩层不会关闭

weixin_43550660的博客

11-26

4344

项目中elementUI的dialog遇到的小bug 点击遮罩层不会关闭 bug : 点击项目中elementUI的dialog遇到的小bug 点击遮罩层不会关闭 bug 原因：因为自己在 dialog 加了样式，导致其不能正常关闭，解决办法：将自己样式删除，采用下面的居中样式（因为能满足我的需求了）饿了么UI框架中的说明：将center设置为true即可使标题和底部居中。center仅影...

el-dialog弹框遮罩层问题

Cool_so_cool的博客

03-15

1173

阴影的位置和显示方式还可能受到其他属性的影响，比如:modal-append-to-body。如果希望阴影遮罩在dialog框下方，可以设置:modal-append-to-body为false，这样dialog框会保持亮度，而其他区域会变暗。下图是出现的问题，遮罩层在弹框上方。

【bug】关于el-dialog上额外多了一层遮罩层

m0_66340074的博客

12-28

5035

2.如果是el-dialog里又嵌套了一层el-dialog弹框，一定要把内层的dialog加上append-to-body="true",插入至 body 元素，保证层级的正确(elementUI的组件内有更多解释)后来听说用absolute绝对定位也会出现这样的问题，我一看自己的代码，原来是给最外面的div设定位为fixed了，无论是绝对定位还是固定定位，都会使元素脱离文档流，删掉换个布局去实现就好了。

element-UI 弹出组件的遮罩层在弹出层dialog模态框的上面解决方法

Fxhani的博客

03-26

2614

关于element 里 Dialog 对话框 组件遇到的问题 element-UI 弹出组件的遮罩层在弹出层dialog模态框的上面造成的原因：因为dialog的组件外层div设置了 position：absolute；属性所以导致遮罩层会在最上面。解决方法： 1. 在属性内加上这段代码 :append-to-body=“true” ； 2 ，:modal-append-to-b...

el-dialog遮罩层遮挡问题

changyana的博客

03-11

924

由于我是el-dialog里边又嵌套了一个el-dialog，所以当出现两个el-dialog时，都会被遮罩层遮挡。

解决vue弹窗被遮罩层遮挡和关闭弹窗后遮罩层不消失的两个问题

weixin_55966654的博客

12-05

7904

（1）弹窗被遮罩层被遮罩层遮挡问题；（2）关闭弹窗后，遮罩层不关闭问题；

elementUI弹窗之坑（dialog的遮罩层在弹出层的上面，子弹窗执行保存（确定）按钮之后还要执行取消按钮，Prop being mutated: "showTree"）

CuiCui_web的博客

09-07

2562

本文主要解决elementUI弹窗嵌套中的坑,笔者在给同事解决难听过程看到了三个问题：弹窗套弹窗出现蒙层、弹窗套弹窗，子弹窗执行保存（确定）按钮之后还要执行取消按钮、弹窗自带关闭x按钮报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent c...

android 父视图底部,Android PopupWindow 使用小Demo，以及从底部弹起的半透明背景的PopupWindow通用父类...

weixin_35740814的博客

05-26

188

关于PopupWindow的使用，网上各种介绍，不胜枚举。我这里记录一下自己写的一个小demo(备忘)，背景是半透明的，从底部弹起的popupwindow框，然后封装成通用父类。效果如下：I(img.png下面是通用父类的代码(BasePopupWindow.java)：protected Activity activity;protected View mContentView;protecte...

elementui抽屉中遮罩层怎么去掉

最新发布

07-24

Element UI 是一套构建于 Vue.js 之上的组件库，在 Element UI 的抽屉组件（Drawer）中，默认会有一个遮罩层（overlay），这个遮罩层在抽屉打开时用于提供视觉反馈，表明某个区域不可交互。如果希望去掉 Element UI 抽屉的遮罩层，您可以在 `el-drawer` 组件的配置选项里禁用遮罩效果。通过设置 `beforeClose` 配置项，并在其回调函数中手动控制遮罩层显示与隐藏的状态，您可以达到去遮罩的效果。具体的实现方式有以下步骤： ### 步骤一：禁用默认遮罩层 首先，在创建抽屉组件的时候，需要禁用遮罩层。这可以通过配置 `overlay-closable` 和 `overlay` 属性来实现： ```html <template> <div id="app">  <el-button @click="openDrawer">打开抽屉</el-button> <el-drawer title="这里是抽屉标题" :visible.sync="drawerVisible" :overlay-closable="false"  width="40%" >  </el-drawer> </div> </template> <script> export default { data() { return { drawerVisible: false, }; }, methods: { openDrawer() { this.drawerVisible = true; // 如果想要自定义遮罩层的关闭逻辑，可以在这里进行操作，比如手动添加或移除类名等 }, closeDrawer() { this.drawerVisible = false; }, }, }; </script> ``` ### 步骤二：自定义遮罩层的关闭逻辑若想要自定义遮罩层的行为，例如在关闭前先展示一段确认提示或者等待动画，可以结合上述的 `beforeClose` 事件和一些自定义的逻辑。 ```javascript methods: { openDrawer() { setTimeout(() => { this.drawerVisible = true; // 自定义遮罩层关闭逻辑 }, 500); }, closeDrawer(done) { setTimeout(() => { // 关闭抽屉之前的操作，如展示确认对话框、动画等 this.$confirm('确定要关闭此窗口吗？').then(_ => { // 执行关闭动作 done(); this.drawerVisible = false; }); }, 1000); }, }, ``` ### 相关问题: 1. **如何自定义 ElementUI 抽屉的样式**？ - 可以通过在组件外部添加CSS类并覆盖Element UI的原生样式来进行自定义。 2. **ElementUI 抽屉中如何动态改变内容**？ - 使用Vue的属性绑定功能（`v-model` 或者 `:value`），将抽屉的内容动态关联到数据模型上。 3. **ElementUI 抽屉是否支持拖动关闭**？ - 默认情况下，ElementUI的抽屉不支持拖动关闭，可以通过增加额外的插件或者自定义逻辑来实现这一功能。