发表新帖
发表新帖

modal appear behind fixed navbar

前端 未结
关注
5 2180
生来不讨喜
生来不讨喜 2021-02-19 03:50

so i have bootstrap based site with fixed navigation bar (that follow you around the page at the top) and when i want to show modal popup, it appear behind those navigation bar,

相关标签:
5条回答
  • 慢半拍i
    2021-02-19 04:14

    This is too late to post the answer, however I've had a similar problem today with Modal popup and a navbar.

    Used javascript to set z-index of the navbar to zero when the popup is displayed and vice versa.

    Note: use whateverElement.style.zIndex = 0 instead of whateverElement.style.z-index = 0 as javascript handles - as subtraction operator.

    0 讨论(0)
  • 一向
    2021-02-19 04:15

    I ran into this today and came up with an alternate solution that doesn't involve modifying the CSS. If you are using MVC, you can use a section tag and render the modal in the layout (anywhere in the body). This causes the default modal behavior to work and no longer hides it behind the nav bar.

    On _layout.cshtml (inside the body tag):

    <body>
    <!--... OTHER Layout/header code...-->

    @RenderSection("modals", required: false)

</body>

    and in your view:

    @section modals{
    @Html.Partial("_MyModal")
}

    Something similar would work in other languages and most importantly doesn't require modifying the CSS.

    0 讨论(0)
  • 迷失自我
    2021-02-19 04:23

    To solve the problem I included in the CSS a super high z-index value (1000000) for the modal-backdrop (the shadow behind the modal), and a little bit higher one (1000001) for the modal:

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

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

    Hope it helps!

    0 讨论(0)
  • 北海茫月
    2021-02-19 04:26

    The navbar is fixed, meaning z-index is only relative to it's children. The simple fix is to simply increase the top margin on the outer modal container to push it down the page slightly and out from behind the navbar.

    Otherwise, your modal markup has to sit in your header and you need to give it a higher z-index than the z-index of the parent navbar.

    0 讨论(0)
  • 悲哀的现实
    2021-02-19 04:33

    You need to adjust the z-index in your CSS. The z-index for your navigation is higher number than everything else. So to adjust it you need to add a z-index that is higher for your modal popup. the code would look like

    For example z-index: 3;

    To be able to do this you have to set a position to your popup.

    For example position: absolute;

    After setting the position you can also adjust the position even more with putting this code in to your CSS

    top: 500px; left:500px;

    This means that the container you put a absolute position on is moved 500 pixels from the top and 500 pixels from the left.

    If you cannot understand what z-index is. I will provide a picture for you.

    z-index axis example

    0 讨论(0)
 看不清?
提交回复
热议问题