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> ...
随机推荐
- null与undefined到底有啥区别?
话不多说,直接先上结论: null 和 undefined 基本相同,只有细微差别 null 是表示缺少的标识,指示变量未指向任何对象,转为数值为 0 undefined 表示 "缺少值&q ...
- xLua中C#调用Lua
C#调用Lua 一.前提 这里使用的是XLua框架,需要提前配置xlua,设置加载器路径: 可以参考之前的Blog:<xlua入门基础>: 二.C#调用Lua全局变量 lua中所有的全局变 ...
- CF193D Two Segments (线段树+dp)(外加两个扩展题)
大概算是个系列整理 (最强版是模拟赛原题)) 首先,我们先来看这个题目. QWQ一开始是毫无头绪,除了枚举就是枚举 首先,我们可以枚举一个右端点,然后算一下当前右端点的答案 我们令\(f[l,r]\) ...
- 【高热FAQ】关于智慧康养物联网加速器 ,你想知道的都在这
摘要:从软硬件解决方案.设备接入到资源扶持,一文梳理智慧康养物联网加速器中ISV最关心的问题. 本文分享自华为云社区<[高热FAQ]关于智慧康养物联网加速器 ,你想知道的都在这>,作者:技 ...
- ClickHouse 存算分离架构探索
背景 ClickHouse 作为开源 OLAP 引擎,因其出色的性能表现在大数据生态中得到了广泛的应用.区别于 Hadoop 生态组件通常依赖 HDFS 作为底层的数据存储,ClickHouse 使用 ...
- 【数据结构】c语言实现集合的交并差运算
待改写:存储数据类型int-->char 重复的元素可存储 功能上不完善 #include <stdio.h> #include <stdlib.h> typedef s ...
- Beta阶段初始任务分配
项目 内容 这个作业属于哪个课程 2021春季软件工程(罗杰 任健) 这个作业的要求在哪里 团队项目-计划-Beta阶段说明书 一.Beta阶段总体规划 根据用户反馈与测试结果修复alpha版本的bu ...
- spring cloud feign的各种配置的使用
在上一节我们完成了feign的基本使用,学会了feign如何去调用其他微服务,这次我们来完成feign的一些自定义配置. 实现功能: 1.全局修改feign的配置和单独修改feign客户端的配 ...
- 单片机STM32的5个时钟源知识
众所周知STM32有5个时钟源HSI.HSE.LSI.LSE.PLL,其实他只有四个,因为从上图中可以看到PLL都是由HSI或HSE提供的. 其中,高速时钟(HSE和HSI)提供给芯片主体的主时钟.低 ...
- 看动画学算法之:双向队列dequeue
目录 简介 双向队列的实现 双向队列的数组实现 双向队列的动态数组实现 双向队列的链表实现 双向链表的时间复杂度 简介 dequeue指的是双向队列,可以分别从队列的头部插入和获取数据,也可以从队列的 ...