Bootstrap Modal Behind Backstage

Question

I have an issue with the Bootstrap modal widget appearing behind the grey backstage of the modal preventing me from doing anything with the modal itself and when I click even over the modal itself it still disappears.

I have checked the other proposed solutions I have found on here as well as other sites including moving it outside any parent container so that it is right after the opening body tag, right before the closing body tag, I have even tried one non-standards compliant method by placing it between the closing head tag and the opening body tag and all of these methods have resulted in the same issue. The result is that no matter where I position the modal I get the same issue with the modal itself appearing behind the grey backstage.

My modal HTML is...

<!-- Admin Login Modal -->
    <div id="admin-login-modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    <h4>Text in a modal</h4>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
    <!-- End Login Modal -->

At the present moment I have it positioned right after the opening body tag.

Any assistance with this is appreciated.

Still didn't make a difference putting the markup right before the closing body tag. — Chris Rutherfurd, Feb 01 '16 at 21:35
You might want to take a look at this: http://stackoverflow.com/questions/10636667/bootstrap-modal-appearing-under-background?rq=1 — Dimitry, Aug 02 '16 at 16:13

score 0 · Answer 1 · answered Feb 01 '16 at 12:31

Remove Your code and paste this code then check .. i think it will work fine

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>`

can you send me the url of you page ? are you working online or on localhost? — Muhammad Fahad, Feb 02 '16 at 05:04
I am working localhost so can't send the URL of the page and I have solved it, see my answer above for the solution. — Chris Rutherfurd, Feb 02 '16 at 06:18

score 0 · Accepted Answer · answered Feb 01 '16 at 21:53

0

I have managed to solve the issue, within the bootstrap.min.css stylesheet locate the class .modal-dialog and add z-index: 1050;.

answered Feb 01 '16 at 21:53

Chris Rutherfurd

1,617
1
15
32

Bootstrap Modal Behind Backstage

2 Answers2