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

最新推荐文章于 2021-04-22 17:29:29 发布
最新推荐文章于 2021-04-22 17:29:29 发布
阅读量7k 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jorzen1984/article/details/70232137
版权
本文探讨了在Bootstrap中使用两种不同的方式来关闭模态框的行为差异。第一种方式能够正确关闭模态框并使背景恢复正常状态；而第二种方式虽然也能让模态框消失，但背景仍保持暗化状态且无法进行其他操作。建议使用第一种方式以确保正确的交互体验。
摘要由CSDN通过智能技术生成

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

第一种

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


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

第二种

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

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


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

会写代码的心理师
关注
vue+elementUI：el-dialog弹出框被遮罩层覆盖及关闭后数据没有清空
Maanqi_1214的博客
03-22 2166
1.el-dialog弹出框被遮罩层覆盖 解决方法：在el-dialog标签里添加 :modal-append-to-body='false’ <el-dialog id="forget-pwd" title="重置密码" :visible.sync="fpwdVisible" width="80%" destroy-on-close :modal-append-to-body="false"> 官网文档中提到：modal-append-to-body决定了遮罩层是否插入至 body 元素上
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
11-30
这是最近在做个人播客系统出现的一个问题, 场景如下 ：   图中我点击删除按钮之后, 弹出一个模态框让我选择是回首页还是, 上一页, 下一页 首页没什么好说的了, 就是直接跳转, 没什么问题 上一页, 下一页却是跳转到上一篇 或者下一篇, 所有的”文章“都是用的是同一个html模板, 所以页面没有重新加载 于是就出现了 上面的问题, 模态框消失了, 但是背景却没有消失 对于这个问题, 我在网上找了好一阵子, 但是貌似并没有相关的问题 1 所以之前我本来是想将这个问题简单化, 直接”location = prevUrl; location.reload() “, 但是 这样有感觉不合适,
bootstrap模态框跳转后 框消失了而背景存在问题的解决方法
一个很酷的人
11-03 3178
一、方法： /* * 用于去除关闭模态框后留下的暗背景 * */ function removeBackground(){ $('.modal-backdrop').remove(); $('body').removeClass('modal-open'); } 二、原理： 这是我在写一个项目的考勤打卡模块遇到的问题，需求是：设置考勤规则时需要设置一个打卡位置， 我用了
去除BootStrap模态框背景变暗效果
githubcurry
04-22 703
##Bootstrap 模态框（Modal）插件 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 bootstrap的模糊框效果都是如下所示的： 近段时间在做项目的时候用到了bootstrap框架，Bootstrap的模糊框的出现会使得背景变暗，项目需要去掉模糊框的暗色背景，所以经过查阅资料后终于找到了答案。 如果需要去掉变暗的背景则需要修改bootstrap.css这个文件的.modal-backd.
关于boostrap中模态框的问题点击后面背景模态框消失的问题
wallowyou的博客
01-20 2391
1.问题     在做一个项目的时候需要使用模态框登陆，发现弹出模态框之后，点击模态框之后的背景色模态框马上消失。     部分代码如下：                                                                               ×                         登陆
bootstrap模态框关闭后清除模态框的数据方法
10-18
这篇文章主要介绍在Bootstrap模态框关闭后如何清除其内部的数据。 首先，我们要了解Bootstrap模态框关闭的事件机制。在Bootstrap 3.x及之前版本中，模态框关闭会触发`hidden.bs.modal`事件，而在Bootstrap 4.x版本...
BootStrap 模态框实现刷新网页并关闭功能
08-31
本篇文章将详细介绍如何利用Bootstrap模态框实现刷新网页并关闭的功能，以及如何禁用空白处点击关闭模态框。 首先，我们需要了解Bootstrap模态框的事件绑定机制。Bootstrap提供了多种与模态框相关的事件，包括`show...
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
08-29
在许多情况下，我们希望在用户完成特定操作（如保存、确认或关闭）后自动关闭模态框，提供更流畅的用户体验。本文将详细介绍如何在Bootstrap中实现在点击“保存”按钮后自动关闭模态框。 首先，我们需要理解...
Bootstrap 模态框（Modal）带参数传值实例
08-29
Bootstrap模态框（Modal）是Web开发中常用的一种交互元素，它允许用户在不离开当前页面的情况下处理额外信息或执行操作。在实际应用中，我们经常需要将数据从父页面传递到模态框中，以确保操作的针对性和准确性。本...
去除Bootstrap模态框背景变暗效果
qq_43077362的博客
04-24 1202
Bootstrap 模态框（Modal）插件 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 bootstrap的模糊框效果都是如下所示的： 本人非前端工程师，在做项目的时候用到了bootstrap框架，Bootstrap的模糊框的出现会使得背景变暗，项目需要去掉模糊框的暗色背景，所以经...
Bootstrap Modal 关闭时引起的问题(滚动条和样式残余)
热门推荐
zhongyangjian的专栏
03-11 1万+
我在使用bootstrap3.0时，用了他的modal 功能打开一个模态框时，在关闭modal时，bootstrap没有清除它打开的样式，有余留样式，造成我的页面的滚动条消失了（打开modal前是有滚动条的），代码如下：         ....省略部分代码         $("#setRatioModal").modal("hide");         showRation();/
bootstrap 模态框使用，背景变黑，模态框不显示
Sqssq的博客
10-27 1383
模态框代码必须放在body下。button的代码在哪都可以。
DarkMode(2)：深色模式解决方案——css颜色变量实现Dark Mode
周陆军的博客，分享it技术。
12-11 2704
暗黑模式实现，最初的设计，就是参考之前的主题模式。所谓多套主题/配色/皮肤，就是我们很常见的换肤功能。换肤简单的实现就是更换 css实现不同样式呈现不同肤色。 之前做不同颜色的皮肤，暗黑模式可以单做其中的一种黑色暗黑主题。 通用的方法，就是less、sass、post-css，把颜色抽离出变量。然后打包输出不同的样式，即： CSS预处理直接生成多套主题样式 利用Less，stylus 或 sass 的变量代替颜色值 配置多个主题颜色配置 利用grunt/gulp/webpac
Bootstrap modal 打开多个弹窗关闭后阴影遮罩问题
红袖添香的博客
01-23 2782
boostrap 模态框阴影是显示后填加了modal-backdrop这个class造成的： &lt;div class="modal-backdrop  in"&gt;&lt;/div&gt; 1 有两种方式去除模态框阴影，第一种模态框显示后直接删除modal-backdrop： $(".modal-backdrop").remove();//删除class值为modal-backdrop的...
Bootstrap模态框避免点击背景关闭【转】
weixin_33768481的博客
01-21 488
http://blog.csdn.net/gloomy_114/article/details/51611734 如果您觉得这篇文章帮助到了您，可以给作者一点鼓励
为什么弹了个模态框，他自己也变黑了？
immense的博客
07-20 1748
反正都是弹在最上面，模态框最好写在body下不容易错。 被别的div遮住了，最好放在程序最下面，也就是尽量作为 body 标签的直接子元素就不会了
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值