CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
PamanBeruang
PamanBeruang

Reputation: 1589

modal appear behind fixed navbar

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, how to fix?

and i using margo template from graygrids

it also appear in summernote modals for uploading picture, so it looks like all modal will appear behind those navigation bar.

enter image description here

Upvotes: 20

Views: 37355

Answers (6)

Igweokolo Davidson Onyebuchi
Igweokolo Davidson Onyebuchi

Reputation: 1

you should check if you added z-index to your navigation style. you don't have to change or adjust the position of your modal. You don't need to add z-index to the navigation style if you're dealing with a fixed navigation, but if it's an absolute navigation bar, then you can add z-index: 9; to the navigation, style while the modal remains untouched. I hope this helps.

Upvotes: 0

Andy B
Andy B

Reputation: 101

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.

Upvotes: 0

Mo-
Mo-

Reputation: 184

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.

Upvotes: 0

gbruscatto
gbruscatto

Reputation: 696

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!

Upvotes: 25

Plam
Plam

Reputation: 379

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

Upvotes: -1

Korgrue
Korgrue

Reputation: 3478

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.

Upvotes: 19

Related Questions