vue dialog里面再加dialog 导致页面被遮挡

最新推荐文章于 2023-11-25 09:59:42 发布
最新推荐文章于 2023-11-25 09:59:42 发布
阅读量1k 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yyyyyysssssshhhhhh/article/details/103887161
版权

在里面一个el-dialog 加上 append-to-body

<el-dialog append-to-body></el-dialog>

yyyyyysssssshhhhhh
关注
专栏目录
Element-UI中el-dialog使用遇到的坑：打开弹框再点击浏览器的上一个页面的按钮，弹框的遮罩层没有关闭
weixin_44370837的博客
04-12 8422
大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。 作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。 重现步骤如下： 打开使用el-dialog编写的弹框 点击浏览器的回退按钮 现象：弹框的遮罩层没有关闭 解决办法： 根据官网文档可知，在弹框中添加如下代码即可解决 :modal-append-to-body = "false" 原因分析：官方文档的说明入下图 Element-ui中弹框的遮罩层由下面这行代码实现，具体的CSS在此就不写了。
TinyMCE富文本在Vue element的dialog中(modal)插件被遮挡或者是组件下拉框层级显示不正确
qq_21991909的博客
06-18 1662
tinymec富文本封装自己的组件在dialog中调用时插件和按钮层级显示不正确的问题
VUE3+element plus在el-tabs内部有多个el-dialog时，遮罩会叠加
nopyramid的博客
11-25 1033
有问题的效果，遮罩层是黑色的，需要多次点击才能关闭dialog。
vue项目中element-ui对话框el-dialog嵌套显示时多了一个遮罩层解决办法
sjp991012的博客
11-21 1081
【代码】element-ui对话框el-dialog嵌套显示时多了一个遮罩层解决办法。
elementUi el-dialog多个嵌套弹出层被遮罩层遮住问题
qq_55928824的博客
08-23 371
elementUi el-dialog多个嵌套弹出层被遮罩层遮住问题
Element-UI中el-dialog打开弹框再点击浏览器的上一个页面的按钮，弹框的遮罩层没有关闭
2301_76707317的博客
09-27 281
根据官网文档可知，在弹框中添加如下代码即可解决。
根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽.7z
12-09
无覆盖效果意味着对话框或抽屉不会完全遮挡页面背景，可能需要调整Z-index或者使用半透明背景，以使背景内容可见但弱化。这样可以保持用户对背景内容的感知，同时突出弹出窗口的重要性。 可拖拽功能则需要用到...
解决Vue开发中对话框被遮罩层挡住的问题
10-17
然而，有时开发者会遇到一个令人棘手的问题，即对话框在显示时会被页面上的遮罩层所遮挡。这一现象可能会导致对话框的按钮、文本等关键内容无法被用户正常看见或点击，从而影响用户体验。 要了解这一问题的解决方法...
vue3实现在element Dialog 对话框中预览pdf文件
weixin_56733569的博客
10-18 2031
在element dialog弹窗中实现pdf文件预览
解决消息通知被el-dialog对话框的遮挡的问题($message、$alert、$notify、$confirm)
dingdingdandang的博客
04-12 3453
文章目录1. 原因分析2. 完美解决3. 效果 1. 原因分析 出现这种情况的原因是因为消息弹窗的层级z-index比对话框低导致的，消息弹窗的z-index一般在2001，而对话框的z-index在3000左右。 解决思路很简单，我们只要把对话框的z-index降低即可，让它显示在消息弹窗下面，所以我们只要把对话框的z-index设为1000左右即可,但不要太低，以免对话框被覆盖。 2. 完美解决 直接在对话框上加 :z-index="1000" 3. 效果 ...
vue-dialog的弹出层组件
12-04
本文章通过实现一个vue-dialog的弹出层组件，然后附加说明如果发布此包到npm，且能被其他项目使用。 功能说明 多层弹出时，只有一个背景层。 弹出层嵌入内部组件。 弹出层按钮支持回调 源码下载 实现 多层弹出时，只有一个背景层 利用两个组件实现，一个背景层组件（只提供一个背景层，组件名：background.vue），一个弹出层内容管理组件（实现多个内容层的管理，组件名：master.vue)。 弹出层嵌入内部组件 使用vue的component组件实现，他可以完美支持。 弹出层按钮支持回调 在master.vue中实现，详细解析此代码 html代码
VUE 多级dialog产生蒙版问题解决（弹出框被遮罩问题）
AmbroseLe
08-17 8904
问题是这样的   我的问题是在父组件里有个弹出框，弹出框里面调用了子组件，而子组件里点击图片显示大图（使用 弹出框形式）。当图片弹出框弹出的时候，就出现了最外层的一个蒙版，当然和层级肯定是有关的， 但是怎么设置z-index都不行。 最终解决方式。是在弹出框加一个      append-to-body     属性，因为第一 层弹出框没有被遮罩住，而第二层弹框被遮住了，所以...加了这个属...
el-dialog点击遮罩层不关闭弹窗
lighting0_0的博客
11-22 3643
原文链接： https://blog.csdn.net/qq_44711316/article/details/120968545?ops_request_misc=&request_id=&biz_id=102&utm_term=element%20dialog%E7%82%B9%E5%87%BB%E9%81%AE%E7%BD%A9%E5%B1%82%E4%B8%8D%E5%85%B3%E9%97%AD%E5%BC%B9%E7%AA%97%20%E5%B1%80%E9%83%A8%
el-dialog被遮罩层遮挡
BangD的博客
11-01 399
后来我又把:modal-append-to-body="false"改成了append-to-body就可以了，开始我在标签中加:modal-append-to-body="false"，遮罩层是在下面了但是，对于页面中有的边框或者搜索框会在遮罩的上面，el-dialog被遮罩层遮挡（解决办法）title="确认退出？
在el-dialog中进行Vue的路由跳转，跳转后出现遮罩层？
不知名人士的博客
09-26 5846
某个需求需要在路由 /systemSettle/Application 的一个页面中的对话框中进行路由跳转，至另一个页面下，如图所示（涉及公司内部业务，已部分打码）： 点击跳转之后，跳转至路由 /systemSettle/payways 下的页面。如图所示： 但是此时发现页面被一整个遮罩层遮住了，页面中的内容都无法点击，这是什么情况???? 打开控制台，如图所示： 果然有个遮罩层，这是哪里来的呢？原来我以为是项目中封装的，但是搜索了一下并没有这个东西。于是去ElmentUI的官网找一下el-dialo
vue 使用Dialog对话框使用过程中出现灰色遮罩问题
qq_41451744的博客
08-27 1903
vue 使用Dialog对话框使用过程中出现灰色遮罩问题
Vue项目element-ui弹窗组件el-dialog，阻止点击遮罩层关闭
zhichaogong的博客
06-15 9036
关于element-ui弹窗组件el-dialog，阻止点击遮罩层关闭的问题，以及全局处理和局部处理的方法 前言 在使用element-ui的组件时，有时候根据项目需求，需要修改组件默认的属性值。我们公司项目的需要在el-dialog弹窗组件中写入表单数据，由于表单数据比较多，有时候误触了el-dialog的遮罩层就关闭弹窗了，导致辛辛苦苦填入的数据被清空重置。所以需要阻止弹窗遮罩层的关闭事件。 下面针对使用npm安装使用element-ui 1. 全局配置 npm引入，直接在main.js文件中写入如下
vue dialog嵌套，遮罩层遮盖住对话框的解决方法
且听风吟的博客
09-03 6785
官方文档中的嵌套dialog例子指出了： 页面效果如下：
一个 Dialog 内嵌套另一个 Dialog,嵌套的Dialog被遮挡
qq_40664804的博客
04-19 1182
一个 Dialog 内嵌套另一个 Dialog,嵌套的Dialog被遮挡
vue dialog 页面居中
最新发布
02-27
在Vue中实现对话框页面居中有多种方法，以下是其中一种常见的实现方式： 1. 首先，在Vue组件中创建一个对话框组件，可以使用第三方库如Element UI或者自定义组件。 2. 在对话框组件的样式中，设置其为绝对定位，并将left和top属性设置为50%，同时使用transform属性将其平移至屏幕中心。 3. 在对话框组件的父组件中，使用条件渲染的方式控制对话框的显示与隐藏。 4. 在父组件中，使用CSS的flex布局或者其他方式将对话框组件居中显示。 下面是一个示例代码： ```vue <template> <div class="parent"> <button @click="showDialog">打开对话框</button> <dialog-component v-if="isDialogVisible" @close="closeDialog"></dialog-component> </div> </template> <script> import DialogComponent from './DialogComponent.vue'; export default { components: { DialogComponent, }, data() { return { isDialogVisible: false, }; }, methods: { showDialog() { this.isDialogVisible = true; }, closeDialog() { this.isDialogVisible = false; }, }, }; </script> <style scoped> .parent { display: flex; justify-content: center; align-items: center; height: 100vh; } .dialog-component { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } </style> ``` 在上述示例中，点击按钮会触发`showDialog`方法，将`isDialogVisible`设置为true，从而显示对话框组件。对话框组件的样式使用绝对定位，并通过设置left和top属性为50%，使用transform属性将其居中显示。父组件使用flex布局将对话框组件居中显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值