毕设-BootStrap点击隐藏Modal后出现阴影遮罩层

最新推荐文章于 2024-08-21 09:17:03 发布
最新推荐文章于 2024-08-21 09:17:03 发布
阅读量4k 收藏
点赞数 1
分类专栏： SpringBoot使用说明书
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Damionew/article/details/78966502
版权

莫名遭遇奇怪的Modal隐藏后出现阴影遮罩层


先是用

$(".modal-backdrop").remove();

去掉阴影，但是又出现一个问题：点击显示Modal模态框，但是闪烁一下又消失了，

然后才知道一切的原因包括上面那个阴影遮罩层都是因为引入了两个bootstrap.js，bootstrap.js和modal.js重复调用，肯定会出现一些问题

Damionew
关注
专栏目录
Bootstrap实现遮罩层
07-01
Bootstrap实现遮罩层 参考文档： http://blog.csdn.net/u014175572/article/details/51800168 Bootstrap实现遮罩层 参考文档： http://blog.csdn.net/u014175572/article/details/51800168 Bootstrap实现遮罩层 参考文档： http://blog.csdn.net/u014175572/article/details/51800168
bootstrap模态框手动隐藏后遮罩层的问题
weixin_43472250的博客
07-25 950
模态框手动隐藏后，使用#page_container加载其他页面局部刷新,模态框不会消失，需要手动隐藏，并且需要添加鼠标的滚轮效果，不然会失效 $("#模态框ID").modal('hide'); $('.modal-backdrop').remove(); $('.modal-open').css("ove...
Bootstrap 模态框（Modal）插件
最新发布
lwx666sl的博客
08-21 1072
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
bootstrap使用Modal,无法关闭遮罩层
u014095878的专栏
06-03 1645
bootstrap使用Modal, 在加载数据的时候，使用modal作为加载框，收到后台数据再关闭。 频繁操作多次之后，发现明明后台返回数据了，遮罩层
解决二级模态框关闭后，遮罩阴影依然存在，导致页面无法操作的BUG
weixin_40891904的博客
12-12 5194
在项目后台中由于需要展示二级模态框，在点击关闭二级模态框（弹出框）的时候出现了遮罩阴影依然存在，导致页面呈现暗灰色，无法操作的现象效果图如下： 出现改问题的原因是：由于点击“关闭”按钮或点击模态框右上角的“X”或点击模态框右边的空白处，会使两层或多层模态框同时关闭，但是modal自己生成的遮罩层只关闭了一个，其他的依然存在，因此导致遮罩阴影覆盖原有页面，导致无法操作页面。 解决问题的方
bootstrap使用Modal,关闭弹框遗留遮罩层
阳光girl
08-30 3785
前两天，用公司封装的框架，写了一个弹框，两个弹框操作相隔时间很短，第二个弹框出现遮罩层。 // 手动清除 $(".modal-backdrop").remove(); 发现弹框关闭后滚动条不好使。然后f12查看，发现modal-open未关闭，之后再执行 $("body").removeClass('modal-open'); 问题就可以解决了。 不过，这种方法虽然简单，但是总觉得有点...
vue3-bootstrap5-modal:使用Bootstrap 5的简单vue 3模态组件
04-04
＃vue3-bootstrap-5-modal-component使用引导程序5的vue 3的简单模态组件 依存关系： 该组件需要安装Bootstrap 5和Popper npm install bootstrap@next npm install @popperjs/core 然后可以将它们包含在main.js...
vue-bootstrap-modal：可重用的bootstrap-modal Vue组件，用于简单模式
02-09
npm install --save @andresouzaabreu/vue-bootstrap-modal 建立 import BootstrapModal from '@andresouzaabreu/vue-bootstrap-modal' // register it globally with whatever name you want Vue . component ( 'bs...
F2-Plugin-Bootstrap3-Modal:用于 F2 的 Bootstrap3 模态插件
07-05
F2 的 Bootstrap3 模态 Note: this library is an experimental plugin targeting a future release of F2. It is not intended ...只需在全局命名空间中包含上述要求的页面上加载f2-plugin-bootstrap-modal.js脚本。
个人毕设-基于mysql+ssm+bootstrap的企业员工管理系统源码.zip
08-31
个人毕设-基于mysql+ssm+bootstrap的企业员工管理系统源码.zip个人毕设-基于mysql+ssm+bootstrap的企业员工管理系统源码.zip个人毕设-基于mysql+ssm+bootstrap的企业员工管理系统源码.zip个人毕设-基于mysql+ssm+...
react-bootstrap-modal-example:React 中的模态实现示例，使用 react-bootstrap
06-28
React 中的模态实现示例，使用 react-bootstrap。 设置 在 repo 根目录中运行npm install 。 使用npm install -g browserify全局npm install -g browserify 。 运行browserify example/app.jsx -o example/app.js ...
bootstrap模态框hide遮罩层不隐藏解决办法
weixin_34087503的博客
05-16 1161
问题：在使用ajax提交模态框表单数据后，隐藏模态框并局部刷新，导致遮罩层不消失 原因：模态框隐藏并局部刷新，导致在hide方法没执行完成时已经局部刷新，没有隐藏掉遮罩层 解决办法：方法一：把模态框放在更上层页面，而不是放在子页面上 方法二：利用模态框的事件，在模态框完全消失后再进行局部刷新 //隐藏模态框 //在提交操作完成后打一个标记 tag = false if (code == 200){...
bootstrap-出现模态对话框，不出现遮罩层
鲸鱼姐的专栏
08-04 855
问题：出现模态对话框，不出现遮罩层，源代码如下： <input shiro:hasPermission="user:add" type="button" value="新增用户" id="addBtn" data-toggle="modal" data-target="#addUserModal" class="btn btn-primary" data-backdrop="false"&g...
Bootstrap之modal关闭，但遮罩层无法隐藏
热门推荐
w926498的博客
08-27 2万+
点击如下modal中的按钮时，modal可以正常关闭。 &lt;button v-if="flag == 'update' " data-dismiss="modal" class="btn btn-success btn-sm" @click="updateMainProjectSubmit()"&gt;修改 &lt;/button&gt; 因为想在点
vue Antd单独隐藏Modal.confirm(this.$confirm方式)对话框的默认ok或cancel按钮
wocwin的博客
10-09 9341
有时候我们需要单独隐藏Modal对话框的默认确定或取消按钮，设置:footer="null"会把两个按钮都隐藏。 Antd有提供两个参数用于单独修改确定、取消按钮：对于确定按钮，设置:ok-button-props="{ style: { display: ‘none’ } }"；对于取消按钮，设置:cancel-button-props="{ style: { display: ‘none’ } }"。这样就能快速隐藏对应按钮了。 那么以上都是在template中隐藏，但单我们使用this.$confir
Vant Dialog.confirm函数形式确认框点击遮罩层关闭弹窗
撑起自己半边天
09-06 2433
Vant Dialog.confirm函数形式确认框点击遮罩层关闭弹窗
解决消息通知被el-dialog对话框的遮挡的问题($message、$alert、$notify、$confirm)
dingdingdandang的博客
04-12 3569
文章目录1. 原因分析2. 完美解决3. 效果 1. 原因分析 出现这种情况的原因是因为消息弹窗的层级z-index比对话框低导致的，消息弹窗的z-index一般在2001，而对话框的z-index在3000左右。 解决思路很简单，我们只要把对话框的z-index降低即可，让它显示在消息弹窗下面，所以我们只要把对话框的z-index设为1000左右即可,但不要太低，以免对话框被覆盖。 2. 完美解决 直接在对话框上加 :z-index="1000" 3. 效果 ...
bootstrap modal 模态框手动关闭后的残留问题
Amy的博客
08-30 1183
场景： 为了在modal里面实现表单提交，所以楼主 移除了button上的data-dismiss="modal",采用手动关闭modal $("#phoneModal").modal('hide'); //删除modal隐藏之后的遮罩层 $('.modal-backdrop').remove(); 遇到的问题： 上述代码执行完毕后，再次点开modal的时候，modal闪退，只留下一个...
bootstrap 模态框的关闭后，背景仍然是暗色的。
会写代码的心理咨询师
04-18 7018
这个问题是两种写法不同造成的 第一种 $('#avatar-modal').modal('hide'); 这种写法模态框会关闭，并背景恢复。 第二种 $('#avatar-modal').modal().hide(); 这种写法，模态框会消失，但暗色背景仍然在。不能操作。 所以建议bootstrap相关语法，用第一种即可。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值