BootStrap中模态框踩坑
在模态框中使用html标签上的自定义属性来打开模态框后,在使用JS关闭模态框,就会出现多层蒙板问题
文章图片
出现这个问题的原因就是没有仔细看bootstrap的官方文档,我人麻了,搞了好久
文章图片
务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免其他组件影响模态框的展现或功能。
【BootStrap中模态框踩坑】如果你把模态框放到一个JSP页面,然后通过
标签引过来,也不算是body的直接子元素,如果你硬要把模态框放到其他位置,也有方法做到
网上有的说使用 $(".modal-backdrop").remove();
//删除class值为modal-backdrop的标签,可去除阴影
来删除蒙板,但是删除完之后会出现滚动条消失,无法点击屏幕的致命bug,这种方法直接pass
我这里的解决办法就是点击按钮里没有模态框目标和转换两个自定义属性,直接使用JS代码来控制打开和关闭模态框,就可以解决
官方给的获得模态框对象的方法
// 这里感觉有些麻烦,直接使用上面的就可以了
let myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
myModal.show();
myModal.hide();
最好的办法还是听官方的话,搞这干嘛,花里胡哨的,能用就行
推荐阅读
- 热闹中的孤独
- Shell-Bash变量与运算符
- JS中的各种宽高度定义及其应用
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 深入理解Go之generate
- 异地恋中,逐渐适应一个人到底意味着什么()
- 我眼中的佛系经纪人
- 《魔法科高中的劣等生》第26卷(Invasion篇)发售
- “成长”读书社群招募
- 2020-04-07vue中Axios的封装和API接口的管理