Bootstrap modal getting blacked out because of positioned navbar
When my Bootstrap modal is shown, it looks like it's behind the black backdrop. Clicking anywhere on the screen causes the modal to go away.
The problem seems to be caused by positioning my navbar - removing position: absolute; or position: relative; fixes it. Unfortunately, since I need to use the z-index on the navbar, I can't get rid of the positioning.
Why is the navbar's positioning causing the modal to be blacked out? Is there a way to make the modal appear in front of the backdrop while keeping the positioning on the navbar?
Answer
It is because your modal is inside your #nav_inner <div> so it will inherit some styling that you do not want it to.
It does not need to be there.
Try moving it into the body like below:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="gutter" id="left_gutter"></div>
<div class="gutter" id="right_gutter"></div>
<div id="container">
<div class="navbar">
<div id="nav_inner">
<div class="page" id="nav_page">
<div class="content_wrapper">
<div class="content">
<a href="#add_topic_modal" role="button" data-toggle="modal" id="teach">Teach</a>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footer_inner">
</div>
</div>
<div class="modal hide fade" id="add_topic_modal" tabindex="-1" role="dialog" aria-labelledby="add_lesson_label" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="add_lesson_label">Teach</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</body>
</html>
UPDATE: This is one of those issues were I knew changing the element position in the DOM would fix it, but understanding the cause is another problem entirely.
Removing position: relative; z-index: 2; from both #navbar and #nav_inner also fixes the problem, so even though the modal has position: fixed; z-index: 1050; where z-index only works with a position and a fixed position puts the element positioned relative to the browser window, this was still not working due to the parent element having a relative position and z-index... magic.
The reason the faded background appeared above was because this is added to the body using javascript, so it had no trouble with applying the correct z-index of 1040, and was placed above the modal.