vue中使用bs3 modal弹出层被覆盖
chrom中查看到
.modal 弹出层的z-inde 1050
背景modal-backdrop是1040调到1029的时候导航栏和弹出框就浮上来了,但是直接调
modal-dialog到最大也是没有用
点击之后弹出层是最后加的
想问下这种情况怎么解决,是不是和vue的生命周期什么的有关
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
你要调整login-wrapper的z-index ,或者把model移出login-wapper这个div,放到外面。
感谢@jsoncode 的思路
因为导航的z-index是1030,登陆按钮在导航上 所以点击弹出框不论设置多大都不会超过1030,
但是弹出背景层是和body的直接子元素,为1040,所以这里就会导致背景层覆盖弹出框。
这里如果把导航的z-index大小大过1040 点击的时候就可以让弹出框在上,但是有一个问题就是因为导航的z-index大于弹出层,所以会有如下效果
现在继续调试,看能否找到一个好的解决方案
最后使用的比较变通的方法,将包含子组件的loginwrapper拿出来和nav平级就好了。
然后通过绝对定位来设置loginwrapper在导航的位置。