vue中使用bs3 modal弹出层被覆盖

发布于 2022-09-06 09:09:45 字数 460 浏览 7 评论 0

clipboard.png
chrom中查看到
.modal 弹出层的z-inde 1050
背景modal-backdrop是1040调到1029的时候导航栏和弹出框就浮上来了,但是直接调
modal-dialog到最大也是没有用

clipboard.png
点击之后弹出层是最后加的

想问下这种情况怎么解决,是不是和vue的生命周期什么的有关

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

哆啦不做梦 2022-09-13 09:09:45

你要调整login-wrapper的z-index ,或者把model移出login-wapper这个div,放到外面。

鹿! 2022-09-13 09:09:45

感谢@jsoncode 的思路
因为导航的z-index是1030,登陆按钮在导航上 所以点击弹出框不论设置多大都不会超过1030,
但是弹出背景层是和body的直接子元素,为1040,所以这里就会导致背景层覆盖弹出框。
这里如果把导航的z-index大小大过1040 点击的时候就可以让弹出框在上,但是有一个问题就是因为导航的z-index大于弹出层,所以会有如下效果

clipboard.png

现在继续调试,看能否找到一个好的解决方案

最后使用的比较变通的方法,将包含子组件的loginwrapper拿出来和nav平级就好了。
然后通过绝对定位来设置loginwrapper在导航的位置。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文