BootStrap中模态框踩坑
在模态框中使用html标签上的自定义属性来打开模态框后,在使用JS关闭模态框,就会出现多层蒙板问题

出现这个问题的原因就是没有仔细看bootstrap的官方文档,我人麻了,搞了好久

务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免其他组件影响模态框的展现或功能。
如果你把模态框放到一个JSP页面,然后通过<jsp:include page=""/>标签引过来,也不算是body的直接子元素,如果你硬要把模态框放到其他位置,也有方法做到
网上有的说使用 $(".modal-backdrop").remove();//删除class值为modal-backdrop的标签,可去除阴影来删除蒙板,但是删除完之后会出现滚动条消失,无法点击屏幕的致命bug,这种方法直接pass
我这里的解决办法就是点击按钮里没有模态框目标和转换两个自定义属性,直接使用JS代码来控制打开和关闭模态框,就可以解决
<button class="btn btn-outline-success addBookTarget">
添加
</button>
<script>
$(".addBookTarget").click(() =>{
$("#addBookModel").modal("show");
})
$("#addBook").click(function (){
alert(1);
$("#addBookModel").modal("hide");
});
</script>
官方给的获得模态框对象的方法
// 这里感觉有些麻烦,直接使用上面的就可以了
let myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
myModal.show();
myModal.hide();
最好的办法还是听官方的话,搞这干嘛,花里胡哨的,能用就行
BootStrap中模态框踩坑的更多相关文章
- Bootstrap中模态框多层嵌套时滚动条问题
在使用Bootstrap中模态框过程中,如果出现多层嵌套的时候,如打开模态框A,然后在A中打开模态框B,在关闭B之后,如果A的内容比较多,滚动条会消失,而变为Body的滚动条,这是由于模态框自带的遮罩 ...
- 黄聪:bootstrap中模态框modal在苹果手机上会失效
bootstrap中模态框在苹果手机上会失效 可将代码修改为<a data-toggle="modal" data-target="#wrap" hre ...
- bootstrap中模态框如果放入form表单中会存在的问题
bootstrap中模态框如果放入form表单中会存在的问题:当模态框显示时,点回车会出现表单自动提交!!!所以在使用模态框的时候要特别注意!
- bootstrap中模态框、模态框的属性
工作中有需要用到模态框的可以看看 <div class="modal fade" id="userModal" tabindex="-1&quo ...
- bootstrap中模态框的大小设置;
bootstrap模态框调节大小: 大尺寸:黑体加大的字体,是更改的代码 <!-- 大模态框的调节 --> <button type="button" class ...
- bootstrap中模态框的使用
1.代码: <%--登录模态框--%> <li><a href="#" data-toggle="modal" data-targ ...
- bootstrap中模态框的大小设置
<!-- 大模态框的调节 --> <button type="button" class="btn btn-primary" data-tog ...
- bootstrap的模态框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Bootstrap -- 插件: 模态框、滚动监听、标签页
Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...
随机推荐
- 11.4.2 LVS—NAT
Virtual Server via NAT(VS-NAT) 用地址翻译实现虚拟服务器。地址转换器有能被外界访问到的合法IP地址,它修改来自专有网络的流出包的地址。外界看起来包是来自地址转换器本身,, ...
- java多线程--启动线程
简单理解启动线程的几种方式: 1. 实现Runnable接口创建一个任务, 调用myTask.run()方法来启动它 2, 构建Thread对象, 调用thread.start()方法启动 这里可以看 ...
- Linux下Electron loadURL报错 ERR_FAILED(-2) Not allowed to load local resource
Linux下Electron loadURL报错 ERR_FAILED(-2) Not allowed to load local resource 背景 使用electron-vue的时候,窗体创建 ...
- Golang通脉之函数
函数是组织好的.可重复使用的.用于执行指定任务的代码块. Go语言中支持函数.匿名函数和闭包,并且函数在Go语言中属于"一等公民". 函数定义 Go语言中定义函数使用func关键字 ...
- JAVA的array中indexOf
记得龙哥有个重构的文章里说直接判断啥的. 今天看JDK ArrayList,看到了他的 indexOf,他先判断,后进入循环,看似写了两遍for 循环,但是简单明了暴力.i like it . pub ...
- [Beta]the Agiles Scrum Meeting 2
会议时间:2020.5.11 20:00 1.每个人的工作 今天已完成的工作 成员 已完成的工作 yjy 修复bug将自动评测改为异步HTTP请求 tq 实现查看.删除测试点功能的后端将自动评测改为异 ...
- Noip模拟4(忁靈霁) 2021.6.6
T1 随(Rand) 由杠哥大定理可得,这题目前不可做,先跳走啦,咕咕.... T2 单(single) 考场上,简单看一眼就看出是个高斯消元,然后..... 板子没记住!!! 然而这不是最糟糕的.. ...
- 彻底搞通TCP滑动窗口
在我们当初学习网络编程的时候,都接触过TCP,在TCP中,对于数据传输有各种策略,比如滑动窗口.拥塞窗口机制,又比如慢启动.快速恢复.拥塞避免等.通过本文,我们将了解滑动窗口在TCP中是如何使用的. ...
- cat userlist(课上练习)
问题描述 Linux文件系统的三层抽象是什么? 写出Cat userlist的过程,要详述目录文件,i-node.数据块,要画图示意. 假设块大小为4k, userlist的大小不小于10k,自己假设 ...
- 并发编程从零开始(十四)-Executors工具类
并发编程从零开始(十四)-Executors工具类 12 Executors工具类 concurrent包提供了Executors工具类,利用它可以创建各种不同类型的线程池 12.1 四种对比 单线程 ...