Menu
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?
509
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.
152
I was having the same problem. But as my content was loaded by ajax, I was unable to create "modal" before closing
So i did this:
$(function(){
$("#add_topic_modal").appendTo("body");
});
And now the "modal" works as expected.
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
