Bootstrap modal window issue?

M

mrDach2016-03-10 23:07:10

css

mrDach, 2016-03-10 23:07:10

I want to create a button that will pop up a modal window. The Bootstrap documentation even has ready-made examples, everything seems to be simple and clear, but something does not work. For some reason, the overlay always goes on top of the modal window. and the modal window does not close on click on the overlay. I looked at the z-index of each element, everything seems to be correct, the modal window has 1040 and the overlay has 1030. what am I doing wrong?
page

<a href="#" class="btn" id="openBtn">Open modal</a>

<div id="myModal" style="opacity: 0.99;" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Dialog</h3>
  </div>
  <div class="modal-body">
      <iframe src="http://staging.lifecoachspotter.com/start-here/" style="zoom:1" width="800" height="650" frameborder="0"></iframe>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal">OK</button>
  </div>
</div>

$('#openBtn').click(function(e){
    e.preventDefault();
      $('#myModal').modal({show:true})
  });

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

I

IvanKalinin, 2016-03-11
@mrDach

Max Muzafarov Bad decision with important.
The first thing to understand is z-index.
Namely, the most important thing is that it works for blocks at the same level (in depth), with the so-called. siblings.
The very first thing is the wrong structure of the html code. You need to move the entire div id="myModal" to the same level as the overlay, i.e. after the tag <body>or </body>,before the overlay block appears exactly there. This will not affect the structure of the site as a whole, because. both have position: fixed. But you will see the "magic" only by correctly arranging the blocks.

M

m_messiah, 2016-03-11
@M_Muzafarov

remove .wt_section { z-index: 10;}
or add .modal { z-index:1040 !important;}