bootstrapmodal事件的modal能不能达到背后阴影同时又是static的效果

  当使用bootstrapmodal事件模态框默认自带半透明阴影如果想要去除阴影,需要怎么做呢

  今天在项目中我遇到了这个问题,想要去除模态框的阴影试了好久都没解决。后來问同事的时候才知道当模态框弹出后,会加上这样一句代码:

  案例:自带半透明阴影的模态框

  红色加粗部分的代码是用来删除删除class值为backdrop的标签实现去除阴影的效果。

  另外有一个需要注意的地方是上面红色加粗部分的代码只能写在模态框弹出以后,才能起到效果原因是,<div class="modal-backdrop  in"></div>这句代码是模态框弹出后才加上去的

  另外我还有一个疑问是,当我一开始就设置模态框为show状态那么这个时候模态框也是没有带半透明阴影的,而当我设置模态框初始为隐藏的点击按钮才弹出时,模态框则会自带阴影

 如果哪位看到这篇文章,并且正好知道这个问题的答案还希望您能分享解决方法,解决我的疑惑谢谢!  

在开发中遇到需要通过点击事件触发第一个模态框,触发后通过事件唤起第二个模态框并且通过事件触发第三个模态框;即模态框嵌套。

模态框嵌套需要用一个模态框包裹所涉及嵌套的模态框从而点击触发模态框不会乱掉。

在模态框嵌套中当该属性存在时不论值等于多少,键盘上的返回键(Esc)都能起作用;而不存在时返回键(Esc)不起作用

当触发模态框时会产生一个阴影层覆盖整个页面。

当需要去除阴影层时可以为其设置css样式

这里也会遇到一次性关闭所有modal引起阴影遮罩的问题也就是所有modal都关闭了,但是主页面仍然被阴影遮罩.

这个问题从哪来的是因为modal叠加,我们点击窗口之外的空白部分┅次性关闭所有model,但是modal自己生成的'.modal-backdrop'只关闭了一个其余的依然存在, 导致阴影遮罩.

1.第一种禁用modal 点击空白自动关闭的功能

也就是只能点击關闭按钮,一层一层关闭避免发生多层关闭的问题。

2.第二种在最外层的modal关闭时手动删除所有遮罩

这里好处是,保留了点击空白自动关閉的功能

以上所述是小编给大家介绍的bootstrapmodal事件 modal 多弹窗之叠加关闭阴影遮罩问题希望对大家有所帮助,如果大家有任何疑问请给我留言小編会及时回复大家的。在此也非常感谢大家对JavaScript中文网网站的支持!

我要回帖

更多关于 bootstrapmodal事件 的文章

 

随机推荐