Bootstrap Modal Not Fading Away Certain Elements

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 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 class="modal-body">
                <h3>Modal Body</h3>
            <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>

Sounds like a z-index issue.

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


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).

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