Bootstrap modal getting blacked out because of positioned navbar

html css twitter-bootstrap positioning

19,881

Solution 1

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">&times;</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.

Solution 2

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.

19,881

Author by

yndolok

Updated on June 20, 2022

Comments

yndolok about 2 years

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?
yeyo over 10 years

Very good explanation, mate, I was not able to fix this problem by myself, I knew it was due to a bad element position in the DOM, this answer not just solved my problem it enlighten my sight.
Roman about 8 years

Same here, I got enlighten! Place modals in extra divs which do not get any other styles!
Milap over 6 years

Though this is not the ideal solution, worked as it should.