Twitter bootstrap modal in navbar opens behind mask

Question

I am using the navbar-search form. I want to have a modal "advanced search" that opens from a link in the navigation bar.

If I put a modal div in my tag in the navigation bar when the modal opens, it is located behind the dark area, which is usually located outside the modal window. Clicking anywhere closes the modal and darkened mask.

I can fix this by moving the modal div outside the navigation bar (and thus outside my form), but then it breaks my form functions. The advanced search method is supposed to function as an extension of the form field directly in the navigation bar, but if I use two different forms to fix a modal problem, the forms no longer work together. It makes sense?

If I enclose the entire navigation bar and my modal (which is located outside the navigation bar) in the tag, it works, but it does screw some navigation formatting, so I think this is not a very clean solution.

So, I need to either fix the modal display problem or make the situation in my form work properly (as in the case, linking the two forms together, without having a ton of duplicated markup for hidden fields, etc.).

Thanks for any ideas! Matt

Here is what I have now (that I went further and just adjusted css after that so that everything was in order). I don’t think it is semantically correct according to the way bootstrap navbar is supposed to be used, but my form works correctly and it is very important to me. :)

<form> <navbar></navbar> <modal></modal> </form> 

Answer 1

I'm a little not sure what you are asking, but this is a blow to what I think you are asking. The modal does not really need to enter the code for the modality in the form itself. The only thing you need in navbar is the link and the trigger that activates the modal.

 <form> <div class="navbar"> <div class="navbar-inner"> <ul class="nav"> <li><a href="#myModal" role="button" data-toggle="modal">Advanced Search</a></li> </ul> </div> </div> </form> <!-- Modal --> <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Advanced Search</h3> </div> <div class="modal-body"> <p>Put your search fields here. </p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary">Search</button> </div> </div> 

See the working link.

http://jsbin.com/ifaqaj/1/edit