Bootstrap Modal Not Fading Away Certain Elements

HTML & CSS
1

I have a link on my page that opens a modal window. I want the whole background to fade out, but a bunch of the elements are not fading.

Any ideas? Here’s some code… Screenshot below. Thanks!

<div class="col-sm-12 projects" style="margin-top:40px;">
  <div class="inner col-sm-3 project">
    <%= link_to image_tag('project.png', :class=>"img-responsive"), "#", :data=>{:toggle=>"modal", :target=>"#projectModal"} %>
  </div>
</div>

<div class="modal fade" id="projectModal" tabindex="-1" role="dialog" aria-labelledby="projectModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <h3>Modal Body</h3>
            </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>

3

Sounds like a z-index issue.

Try raising the z-index of the modal overlay while ensuring the modal is one higher.

e.g.

.modal.in{z-index:10000!important}
.modal-backdrop.in{z-index:9999!important}

Or alternatively look at the z-index of the elements that are on top and reduce them to less than the default bootstrap modal z-indexes (which I think are set to 1049 and 1050 dynamically but you can easily check with developer tools).

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.