Link in navbar to open modal

[guillem-catala]

When adding a link in top navigation bar that triggers a modal, the opening modal will not show properly.
The modal visually appears under the shadowed layer created by modal-backdrop class

Tested with Firefox 3.6.8

[portacustodis]

I have this issue, as well. Tested in Firefox 10.0.2, Safari 5.1.4, and Chrome 17.0.963.56. I have two links in the nav, both triggering a modal form. The form appears under its modal-backdrop in all three browsers.

[wjrichardson]

I'm linking to a feedback modal directly from the top nav bar and haven't noticed any issues. Tested across a variety of browsers.

It may help to attach a screenshot or a jsfiddle so we can see what the problem is.

[portacustodis]

Okay, I have the nav, two divs, and two buttons. When you click the button, the modal appears, but under the black transparent modal backdrop. See

[guillem-catala]

I noticed that this happens when the HTML of the modal is in the same navbar (after or before the triggering link). If you write the modal content outside it works

[portacustodis]

Yeah, I noticed that, too. The problem is that if I move the modal outside the nav, then on a mobile browser, the modal appears outside the viewport.

[wjrichardson]

^ That [viewport problem] is an outstanding bug with the project right now. I don't think a fix has been pushed out.

[portacustodis]

Ah, okay. Thanks.

[mdo]

Yes, we have an outstanding issue with modal placement on mobile. We're working on that soon I hope. For now, you should be able move it before the navbar to keep it at the top of the document instead of the bottom.

We'll punt further discussion to the other issue.

[holyredbeard]

Still the same problem for me, even one year later.

[cvrebert]

Modals are being overhauled in v3; should help this problem.

[Trki84]

This issue still appears on the 3rd version.. is there any work around solution?

[cvrebert]

@Trki84 Don't put a <div class="modal"> inside the navbar. If your issue is something else, and is not covered by http://getbootstrap.com/getting-started/#support-fixed-position-keyboards , then please open a new issue with a JS Fiddle example of the problem.

[Trki84]

Thanks for replying, but its the same issue as Portacustodis.

[mishras]

This seems to happen whenever there is a modal-div containing div section that has position style attribute set as fixed.

[cvrebert]

If there is still an issue here, please file a new bug with a JS Fiddle example demonstrating the problem.