Question

I have a problem with the twitter bootstrap modal setting the backdrop over the top of the modal IF an ‘opacity’ (less than 1) is set on the main that the modal’s html resides in.

Html Layout:

<div id="content-area">
  ...some html

  <div id="someModelId">
     <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3>Some Title</h3>
    </div>
    <div class="modal-body">
      <div>
         ...some content
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
  </div>
</div>

CSS

.content-area {
 opacity:0.9;
}

Therefore, the result is when the Modal is called:

$(“#someModelId”).modal();

The background that the modal specifies sits in front of the modal and clicking on the modal acts as if you clicked outside the modal context and caused it to close.

Answer 1

This turned out to require moving the affected dialog html, outside of the area that was applying the opacity rule via css.