当前页面dialog弹窗路由跳转到另一个页面时候打开另一个弹窗，关闭页面弹窗后返回跳转前页面，发现弹窗还存在，遮罩层消失了

于 2023-12-04 21:48:59 发布
阅读量946 收藏 9
点赞数 12
文章标签： vue.js 前端 前端框架 elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59703592/article/details/134791627
版权

项目场景：

通过弹窗里面路由跳转到其它页面再返回的时候，效果是正常的，弹窗和遮罩层都在！

如果跳转到其它页面再打开一个弹窗后，再关闭当前弹窗，返回之前弹窗，会发现弹窗还在，遮罩层却消失了！

问题描述

通过路由跳转到另一个页面，自动打开编辑弹窗

关闭弹窗，返回上一个页面

原因分析：

返回到之前页面的时候，把遮罩层样式给干掉了

解决方案：

给dialog添加一个固定的背景颜色，把dialog遮罩层关闭就解决了

<el-dialog
      :visible.sync="dialogVisible"
      :modal-append-to-body="false"
      :modal="false"
      style="background: rgba(0,0,0,.5)"
    >

爱跳舞的程序员
关注
  • 12
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Android 自定义加载动画Dialog弹窗效果的示例代码
08-19
主要介绍了Android 自定义加载动画Dialog弹窗效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
android的activity跳转到另一个activity
09-04
主要介绍了android实现从一个activity跳转到另一个activity中去
element-ui中dialog弹窗关闭按钮失效的解决
10-14
主要介绍了element-ui中dialog弹窗关闭按钮失效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3 封装一个全局通用弹窗提示组件（利用js调用 类似于element）
06-21
全局直接使用js调用 this.$confirmation() 调用通用提示弹窗可二次封装 点击确认取消后 会有相应的回调 利用的Promise封装的
dialog 弹窗-倒计时
最新发布
10-28
dialog 弹窗--倒计时 https://editor.csdn.net/md/?articleId=109766225
在el-dialog中进行Vue的路由跳转，跳转后出现遮罩层？
不知名人士的博客
09-26 5358
某个需求需要在路由 /systemSettle/Application 的一个页面中的对话框中进行路由跳转，至另一个页面下，如图所示（涉及公司内部业务，已部分打码）： 点击跳转之后，跳转至路由 /systemSettle/payways 下的页面。如图所示： 但是此时发现页面被一整个遮罩层遮住了，页面中的内容都无法点击，这是什么情况???? 打开控制台，如图所示： 果然有个遮罩层，这是哪里来的呢？原来我以为是项目中封装的，但是搜索了一下并没有这个东西。于是去ElmentUI的官网找一下el-dialo
vue 弹出框 引入另一个vue页面
taiguolaotu的博客
08-21 2116
【代码】vue 弹出框 引入另一个vue页面。
做了一个dialog弹窗目录树，点击跳转，感觉不错
咖啡味的小认真
05-15 451
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- import CSS --> &lt..
Element-UI中el-dialog使用遇到的坑：打开弹框再点击浏览器的上一个页面的按钮，弹框的遮罩层没有关闭
weixin_44370837的博客
04-12 8061
大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。 作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。 重现步骤如下： 打开使用el-dialog编写的弹框 点击浏览器的回退按钮 现象：弹框的遮罩层没有关闭 解决办法： 根据官网文档可知，在弹框中添加如下代码即可解决 :modal-append-to-body = "false" 原因分析：官方文档的说明入下图 Element-ui中弹框的遮罩层由下面这行代码实现，具体的CSS在此就不写了。
使用layui框架弹出层内部为另一个页面，如何使用弹出框内页面按钮关闭弹出层。
qq_40422692的博客
07-21 2091
1.首先我们来看父页面的主要内容（因为本身的buttun控件有问题，所以这里用a标签添加样式来代替了buttun控件） <form id="form1" runat="server"> <div> <a id="clickme_open" onclick = "ClickMe_open()">点击我，弹出新窗口</a> </div> </form> <script>
javascript打开新窗口同时关闭旧窗口的代码分享
xiaoweids的博客
05-25 1146
input type="button" value="打开另一个页面test2.html" onclick="toNewWindow()">if (confirm("你确定要注销身份吗？是－选择确定，否-选择取消"))...{＝＝＝＝＝javascript中弹出选择框跳转到其他页面＝＝＝＝＝＝＝＝＝＝javascript中弹出提示框跳转到其他页面＝＝＝＝＝通过重定向URL实现打开新窗口的同时“关闭”旧窗口。alert("你确定要注销身份吗？alert("非法访问！alert("返回");
js点击取消按钮关闭当前弹框_JS添加一个按钮，点击按钮后跳转到百度首页，关闭页面，关闭弹出的页面【诗书画唱】...
weixin_39769675的博客
12-22 685
页面添加一个按钮，点击按钮后跳转到百度首页，添加关闭页面的按钮，点击关闭后关闭弹出的页面JS部分：//window. document.write("124");//window.alert("121");//提示性//prompt:带有输入内容的弹出框//confirm :带有是和否的弹出框//打印地址栏中所有的内容//console. log(window. location);//打印主机名...
javascript学习笔记
justinok的专栏
11-22 1857
一1.网页技术分为三个方面：静态网页、网页美工、动态网页。2.DHTML(动态HTML)是一种通过各种技术的综合而得以实现的概念，包括三部分：HTML、Script(JavaScrip or VBScript)、CSS(Cascading Style Sheets)。3.颜色“#rrggbb”六位十六进制数。4.js删除提示1)&lt;a  href="#" onclick="return(...
【鸿蒙（HarmonyOS）】Router（路由）、CustomDialog（弹窗）、Popup（气泡提示）和setTimeout（定时服务）的使用（以登录模块为例）
守夜人
09-18 1270
Popup（气泡提示）：可绑定在组件上显示气泡弹窗提示，设置弹窗内容、交互逻辑和显示状态。CustomDialog（弹窗）：可用于广告、中奖、警告、软件更新等与用户交互响应操作。，主攻前端的小伙伴肯定不陌生，科班学习的小伙伴多少也有印象，这里我就简单讲一下。setTimeout（定时器）：指定多久后（ms）完成方法（function）关于布局构建，可以参考同栏目中的文章，以下是大致的布局，后面再完善。Router（路由）：在应用程序中实现不同页面之间的跳转和数据传递。第二步：跳转并传递数值。
点击按钮，弹出一个层为当前可用层，其它均不可用
我本无名的专栏
10-28 2573
 html>head>    script>   function  locking(){   document.all.ly.style.display="block";   documentdocument.all.ly.style.width=document.body.clientWidth;   documentdocument.all.ly.style.height=document.
解决点击el-dialog外的其他区域会导致该对话框关闭。
weixin_51396911的博客
03-10 8248
解决方式一 ： 将Dialog下的close-on-click-modal属性改为‘false’。 需要注意的是： 在使用close-on-click-modal属性时，必须在该属性前加“:”。 解决方式二： 可以通过before-close属性，在Dialog关闭时，让用户进行确认是否需要关闭。 before-close 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果你在 footer 具名 slot 里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 befo..
Vue 路由守卫解决页面退出和弹窗的显示冲突
weixin_30268071的博客
07-05 2744
在使用UI框架提供的弹出层Popup时，如Vant UI的popup，在弹出层显示时，点击物理按键或者小程序自带的返回时，会直接退出页面，这明显不符合页面逻辑。 解决思路： 在弹出层显示时，点击了返回要退出页面前，判断弹出层是否处于显示状态，若处于显示状态，便只关闭弹出层，而不退出页面 解决方法： //页面离开前做的事情，而这个时候，路由已经发生变化，改变成了即将跳转的页面的路由 ...
vue+vue-router+Element ui 怎么点击导航不跳转页面但是可以弹出弹框
Missxu1895的博客
09-16 2082
怎么利用vue-router+Element ui点击导航不跳转页面但是可以弹出弹框 我们每次在点击导航的时候总是会跳转组件，现在的功能需要就是不跳转页面但是点击某一个导航按钮可以弹出弹框，这就要在写路由的时候动一下手脚，也就是在写路由的时候我们需要的就是把path设为空，而且不需要写component，即 写完以后，导航是遍历出来的，然后在利用的时候就是分两种，一种就是除了弹框页面点击跳组件的，一种就是点击弹出弹框的，即在遍历的时候需要分开写 在遍历导航的时候，在==‘YAML创建的时候’，也就是会弹
elementui dialog关闭一个弹窗的同时打开另一个弹窗，会闪一下
05-17
这个问题可能是因为关闭弹窗和打开另一个弹窗的操作没有被同时执行导致的。可以尝试使用 Promise 来确保这两个操作同时执行，这样就可以避免弹窗闪烁的问题。 具体做法是，使用 Promise 将关闭弹窗和打开另一个弹窗的操作封装起来，然后在 Promise 的 then 方法中执行这两个操作。示例代码如下： ```javascript this.$confirm('确定要关闭弹窗吗？').then(() => { // 关闭弹窗 this.$refs.dialog.close(); // 打开另一个弹窗 return this.$confirm('确定要打开另一个弹窗吗？'); }).then(() => { // 执行打开另一个弹窗的操作 // ... }).catch(() => { // 取消关闭弹窗或打开另一个弹窗 }); ``` 在这个示例中，首先弹出一个关闭弹窗的确认框，当用户点击确认时，Promise 的 then 方法会被调用，这时候就可以执行关闭弹窗和打开另一个弹窗的操作了。如果用户取消关闭弹窗或打开另一个弹窗，可以在 Promise 的 catch 方法中进行相应的处理。这样就可以避免弹窗闪烁的问题了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值