angular中model弹框消失后遮罩层未隐藏的解决方法

最新推荐文章于 2020-09-07 15:38:20 发布
最新推荐文章于 2020-09-07 15:38:20 发布
阅读量4.6k 收藏 2
点赞数 1
分类专栏： 前端开发 文章标签： angular 模态框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MURPHY_WNAG/article/details/66478346
版权
在Angular项目中，作者遇到弹出框关闭后遮罩层未隐藏的问题。通过分析发现可能是路由跳转过快导致。为解决此问题，作者尝试移除modal-backdrop元素和.model-open类，但导致滚动条消失。最终解决方案是同时移除这两个元素，确保页面正常显示。
摘要由CSDN通过智能技术生成

在做项目的时候，遇到个问题，在controller中执行弹出框隐藏函数后立即跳转路由，出现遮罩层不隐藏的情况
这里写图片描述
showAlertDialog函数如图，即1秒后模态框自动隐藏

打开浏览器调试，看到页面中有遮罩层，且元素中还存在一个modal-backdrop的div
这里写图片描述

这个应该是本应该消失的模态框的元素，不知道为啥还在，可能是路由模态框消失后立即路由跳转造成的（我猜的。。）。在网上找了百度了很久

最低0.47元/天 解锁文章
MURPHY_WNAG
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【angular】遮罩效果实现
高精尖发展
03-15 3664
想弄遮罩效果已经很长时间了，但是一直没有做，前几周看见倩倩的博客感觉挺棒的，所以就试了试，成功了之后记录一下吧： 参照使用bootstrap的js插件，使用modals来实现遮罩效果。 官网 http://v3.bootcss.com/javascript/#modals 首先在htlm中添加一个带id 的隐藏按钮： <!-- 点击 解除绑定 为考试解除资源 -...
angularjs loading遮罩层
04-18
纯的angularjs,不用jq，gif ,注入module调用.show()和.hide()即可使用
使用bootStrap模态框遇到的一个小问题；点击确定之后模态框不关闭，背景也没移除，无法操作界面
咸鱼的博客
08-13 3148
$("#divAddAddress").modal('hide'); $(".modal-backdrop").remove(); 我用了上面两条语句解决，第一个是用来隐藏模态框，第二个用来消除模态框背景（其中分别使用了id选择器，和class选择器） ...
AngualrJS中每次$http请求时的一个遮罩层Directive
weixin_33738555的博客
01-08 96
  在AngualrJS中使用$http每次向远程API发送请求，等待响应，这中间有些许的等待过程。如何优雅地处理这个等待过程呢？如果我们在等待过程中弹出一个遮罩层，会是一个比较优雅的做法。这就涉及到了对$http的请求响应进行拦截了。请求的时候，弹出一个遮罩层，收到响应的时候把遮罩层隐藏。其实，$httpProvider已经为我们提供了一个$httpProvider.interceptors属...
AngularJs 遮盖
David宫洪深的博客
12-23 1783
AngularJS 自定义标签 实现遮盖 公用
Angular2组件之遮罩
程序媛一枚
12-31 2593
项目介绍     由于自己能力不够，在打开编辑模态框的时候仍可以删除页面的数据，这就违背了页面的设置原则。所以，后端的小伙伴建议我加上遮罩，这样就不会让用户误操作从而导致系统的数据混乱的问题。 解决方案     参照使用bootstrap的js插件，使用modals来实现遮罩效果。 官网     http://v3.bootcss.com/javascript/#modals HT
Angular中sweetalert弹框的基本使用教程
12-11
最近太忙了，项目中使用的弹框老板嫌太丑，让我们优化一下，我在网上找了一下，找到了sweetalert弹框，算是比较好看的弹框了。所以我就想办法将sweetalert用到项目中，在项目中引入sweetalert时，遇到诸多问题，但...
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
10-23
5. 显示和隐藏的控制：通过调用jQuery的.hide()方法来隐藏选中的元素，从而实现点击页面其他区域时隐藏下拉菜单和遮罩层的效果。 上述内容中的代码示例演示了如何通过绑定点击事件到document对象，并在事件处理函数...
Angular懒加载机制刷新后无法回退的快速解决方法
11-22
今天在项目中遇到一个很奇怪的问题,使用oclazyload懒加载angular的模块,刷新页面后,单击回退按钮无法返回上一个页面.估计是使用懒加载机制销毁了angular内部的state关联,导致无法回到上一个state(单击回退按钮 ui-...
angular ng-model 无法获取值的处理方法
12-12
该问题是由angular使用jq日期插件导致的无法双向绑定 <input id="dateDayStart" ng-model="dateDayStart" />...以上这篇angular ng-model 无法获取值的处理方法就是小编分享给大家的全部内容了
bootstrap-modal 模态框显示一下又消失问题解决以及模态框的基本使用方法
路漫漫其修远兮
08-23 1万+
一：问题场景 在开发中给button一个点击事件通过方法中的$('#id').modal('show')方式打开模态框，发现打开后模态框显示一下又消失了。 二：解决方法 经过查询大概有下面几种方式，我的问题相对好解决采用的是第4个方法解决 1、bootstrap.min.js与modal.js不能混用。 2、触发模态框的组件需要设置 data-toggle=“modal”   3、换一...
angularjs模态框的使用
笨笨猪Insist的博客
08-20 338
第一步编写html页面 1.触发模态框的点击事件 <div> <button type="button" class="btn btn-primary" ng-click="openAddModal()" data-toggle="modal" data-target="#documentOprModal" style="margin-left: 10px;float:...
element-ui 对话框中嵌套对话框及其遮罩层关闭问题
chpswg的专栏
09-07 3838
1、经常会遇到对话框中打开对话框，主要是两个对话框均设置:append-to-body="true" 父组件对话框 父组件中引入子组件 子组件中对话框设置 运行后 这样即使是多个对话框逐层嵌套都可以。 注意的是，在子组件中千万不能输入:modal-append-to-body="false"，否则，当子组件关闭时，所有对话框的遮罩层都会被关闭，变成了没有遮罩层，如下图两层对话框关闭子对话框后，父组件的遮罩层同时也被关闭了 下图第三层对话框关闭后，父组件和父组...
angular6实现点击空白隐藏下拉框
pufaer的博客
03-25 910
1.在项目的常驻组件中，如header.component.js。目的是在任何页面的任何位置触发事件，进行事件传递。 import{ListServiceService}from'./list-service.service'; constructor( privatelistService:ListServiceService, ){ docu...
angular 实现modal windows效果（即模态窗口，半透明的遮罩层），以及bootstrap(css,components,js)的初步学习...
weixin_33963189的博客
05-28 332
废话不说，直接上代码。可直接看效果，对着分析。。今天算是bootstrap 入门了，开心。。 突然居然很多事情就是那样，不要太多的畏惧，迈出第一步其实就成功了一半了。 &lt;html ng-app="app"&gt; &lt;head&gt; &lt;script src="../lib/js/angular.js"&gt;&lt;/script&gt; &lt
bootstrap模态框点击遮罩层时，让模态框不关闭
贵林之恋的博客
05-17 6513
模态框默认情况，当点击遮罩层或者按下esc键时会关闭模态框，项目需求当点击的时候不关闭，自己用了两种办法解决。第一种：直接添加属性 data-backdrop="static" data-keyboard="false"&lt;div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelled
布局的时候什么时候用xs,sm,md,lg?
04-02 3万+
参考知乎等网上资料，整理的！当你想要内容大小随着屏幕大小自动适应的时候就可以使用bootstrap，也就是在pc端以及不同手机（显示屏大小不同）端内容也能够正常显示的时候。一行最多占十二个标签，不管是大屏还是超小屏的时候。col-lg一般用于大屏设备，(min-width:1200px);col-md一般用于中屏设备，(min-width：992px);col-sm一般用于小屏设备，(min-wi...
element ui 对话框el-dialog关闭事件
热门推荐
Lovnx
08-02 15万+
通常会有需求，在关闭弹框后需要清空填写的数据，这时候就需要关闭事件了<el-dialog title="标题" :visible.sync="bind" size="small" @close='closeDialog'> </el-dialog>在标签中加入@close='closeDialog' mothods中加入 //关闭弹框的事件 closeDialog(){ t
angular中的modelChange、
最新发布
05-17
Angular中的modelChange是一个事件，它在模型值发生变化时触发。通常情况下，modelChange事件用于将输入框的值绑定到组件中的属性或方法。当用户在输入框中输入文本时，该文本会自动绑定到组件中的属性或方法中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值