模态出现在固定导航栏后面

Question

所以我有基于bootstrap的网站固定导航栏(跟随你在页面顶部),当我想显示模态弹出窗口时,它出现在那些导航栏后面,如何解决？

我使用gregogrids的margo模板

它也出现在summernote模式上传图片,所以看起来所有模态都会出现在这些导航栏后面.

Answer 1

导航栏是固定的,这意味着z-index只相对于它的子项.简单的解决方法是简单地增加外部模态容器的上边距,使其略微向下推到页面并从导航栏后面向外推.

否则,您的模态标记必须位于标题中,您需要为其提供比父导航栏的z-index更高的z-index.

Answer 2

为了解决这个问题,我在CSS中包含了一个超高z-index值(1000000)的模态背景(模态背后的阴影),以及一个稍微高一点(1000001)的模态:

  .modal-backdrop {
    z-index: 100000 !important;
  }

  .modal {
    z-index: 100001 !important;
  }

希望能帮助到你!