bootstrap 模态框的关闭后，背景仍然是暗色的。

最新推荐文章于 2022-03-07 13:23:34 发布
原创 最新推荐文章于 2022-03-07 13:23:34 发布 · 7.1k 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文探讨了在Bootstrap中使用两种不同的方式来关闭模态框的行为差异。第一种方式能够正确关闭模态框并使背景恢复正常状态；而第二种方式虽然也能让模态框消失，但背景仍保持暗化状态且无法进行其他操作。建议使用第一种方式以确保正确的交互体验。

这个问题是两种写法不同造成的

第一种

$('#avatar-modal').modal('hide');


这种写法模态框会关闭，并背景恢复。

第二种

$('#avatar-modal').modal().hide();

这种写法，模态框会消失，但暗色背景仍然在。不能操作。


所以建议bootstrap相关语法，用第一种即可。

bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
11-30
这是最近在做个人播客系统出现的一个问题, 场景如下 ：   图中我点击删除按钮之后, 弹出一个模态框让我选择是回首页还是, 上一页, 下一页 首页没什么好说的了, 就是直接跳转, 没什么问题 上一页, 下一页却是跳转到上一篇 或者下一篇, 所有的”文章“都是用的是同一个html模板, 所以页面没有重新加载 于是就出现了 上面的问题, 模态框消失了, 但是背景却没有消失 对于这个问题, 我在网上找了好一阵子, 但是貌似并没有相关的问题 1 所以之前我本来是想将这个问题简单化, 直接”location = prevUrl; location.reload() “, 但是 这样有感觉不合适,
去除BootStrap模态框背景变暗效果
githubcurry，985cs博士在读
04-22 940
##Bootstrap 模态框（Modal）插件 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 bootstrap的模糊框效果都是如下所示的： 近段时间在做项目的时候用到了bootstrap框架，Bootstrap的模糊框的出现会使得背景变暗，项目需要去掉模糊框的暗色背景，所以经过查阅资料后终于找到了答案。 如果需要去掉变暗的背景则需要修改bootstrap.css这个文件的.modal-backd.
关于模态框消失，还会有个灰色背景
choumin7279的博客
06-16 495
【1】、检查一下是否是模态框冲突 【2】、是否是几种插件模态框不兼容 转载于:https://my.oschina.net/ws34/blog/968223...
bootstrap模态框跳转后 框消失了而背景存在问题的解决方法
一个很酷的人
11-03 3325
一、方法： /* * 用于去除关闭模态框后留下的暗背景 * */ function removeBackground(){ $('.modal-backdrop').remove(); $('body').removeClass('modal-open'); } 二、原理： 这是我在写一个项目的考勤打卡模块遇到的问题，需求是：设置考勤规则时需要设置一个打卡位置， 我用了
BootStrap中Model模态框点击除了×号和关闭按钮外的其他区域不消失
北辰
01-14 1292
问题描述：在使用Model(模态框)时，在模态框中编辑一些信息，点击黑色区域（就是除了×号和按钮的暗色区域），模态框会消失，而再次打开模态框是，原来编辑的信息还在 解决办法： //在模态框的最外层添加data-backdrop="static"就可以使模态框点击除了×号和关闭按钮外的其他区域不消失。 <div class="modal fade" id="add" tabindex="...
去除Bootstrap模态框背景变暗效果
C.
04-16 1万+
Bootstrap 模态框（Modal）插件模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。bootstrap的模糊框效果都是如下所示的： 本人非前端工程师，在做项目的时候用到了bootstrap框架，Bootstrap的模糊框的出现会使得背景变暗，项目需要去掉模糊框的暗色背景，所以经过查阅资料后
解决二级模态框关闭后，遮罩阴影依然存在，导致页面无法操作的BUG
weixin_40891904的博客
12-12 5385
在项目后台中由于需要展示二级模态框，在点击关闭二级模态框（弹出框）的时候出现了遮罩阴影依然存在，导致页面呈现暗灰色，无法操作的现象效果图如下： 出现改问题的原因是：由于点击“关闭”按钮或点击模态框右上角的“X”或点击模态框右边的空白处，会使两层或多层模态框同时关闭，但是modal自己生成的遮罩层只关闭了一个，其他的依然存在，因此导致遮罩阴影覆盖原有页面，导致无法操作页面。 解决问题的方
毕设-BootStrap点击隐藏Modal后出现阴影遮罩层
Damionew的博客
01-03 4186
莫名遭遇奇怪的Modal隐藏后出现阴影遮罩层 先是用 $(".modal-backdrop").remove(); 去掉阴影，但是又出现一个问题：点击显示Modal模态框，但是闪烁一下又消失了， 然后才知道一切的原因包括上面那个阴影遮罩层都是因为引入了两个bootstrap.js，bootstrap.js和modal.js重复调用，肯定会出现一些问题
bootstrap模态框通过js控制显示隐藏(学习篇)
skyblue_afan的博客
03-07 3001
boostrap模态框
bootstrap使用Modal,关闭弹框遗留遮罩层
阳光girl
08-30 3996
前两天，用公司封装的框架，写了一个弹框，两个弹框操作相隔时间很短，第二个弹框出现遮罩层。 // 手动清除 $(".modal-backdrop").remove(); 发现弹框关闭后滚动条不好使。然后f12查看，发现modal-open未关闭，之后再执行 $("body").removeClass('modal-open'); 问题就可以解决了。 不过，这种方法虽然简单，但是总觉得有点...
响应式前端框架Bootstrap系列（16）模态框（Modal）插件
chongfeng2994的博客
11-28 646
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zeping891103/article/details/79063925 模态框是bs框架的插件之一，之所以称为插件，是因为它有这自己的一套API，可以通过API提供的接口实现...
使用bootStrap模态框遇到的一个小问题；点击确定之后模态框不关闭，背景也没移除，无法操作界面
咸鱼的博客
08-13 3333
$("#divAddAddress").modal('hide'); $(".modal-backdrop").remove(); 我用了上面两条语句解决，第一个是用来隐藏模态框，第二个用来消除模态框背景（其中分别使用了id选择器，和class选择器） ...
Bootstrap Modal 关闭时引起的问题(滚动条和样式残余)
热门推荐
zhongyangjian的专栏
03-11 1万+
我在使用bootstrap3.0时，用了他的modal 功能打开一个模态框时，在关闭modal时，bootstrap没有清除它打开的样式，有余留样式，造成我的页面的滚动条消失了（打开modal前是有滚动条的），代码如下：         ....省略部分代码         $("#setRatioModal").modal("hide");         showRation();/
bootsharp不显示模态框，界面变黑的问题解决。
Pabebe的博客
04-18 5139
今天直接引用bootsharp文档的模态框的源代码，出现了如图的问题（不显示模态框，界面变黑）。 解决方法如下，贴出来以免自己忘了。 1，查询后得知 class="model hide fade"其中这个hide具有隐藏模态框的属性。 2，将hide删除再保存代码后，浏览器如图显示。不过还是太丑了，没有像弹出框的样式。 3，在下
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题
OldLock的专栏
02-23 1万+
上篇我提到的‘多弹窗之叠加显示不出弹窗问题’ 这里也会遇到一次性关闭所有modal引起阴影遮罩的问题，也就是所有modal都关闭了，但是主页面仍然被阴影遮罩.这个问题从哪来的，是因为modal叠加，我们点击窗口之外的空白部分，一次性关闭所有model，但是modal自己生成的’.modal-backdrop’只关闭了一个，其余的依然存在， 导致阴影遮罩.这里的解决办法是1.第一种禁用modal 点
关于iOS modal界面跳转黑屏的原因及解决方案
chWow的博客
11-21 6354
Xcode的Storyboard用连线跳转界面非常方便，但是有时候直接连线不能解决所需要的问题，直接用presentViewController方法会导致黑屏。 原因：在创建第二个视图对应的类时系统自动重写了-(void)viewDidLoad这个方法，而presentViewController这个方法是不允许重写-(void)viewDidLoad这个方法。 于是就把系统自动生成的View
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值