multiple modal-backdrop fade in code example

Example 1: modal-backdrop fade in issue

Just move the entire modal outside of the rest of your code, to the very 
bottom. It doesn't need to be nested in any other element, other than the body.

<body>
    <!-- All other HTML -->
    <div>
        ...
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal">
        ...
    </div>
</body>


They hint at this solution in the documentation ( Modal Markup Placement )
Always try to place a modal's HTML code in a top-level position in your 
document to avoid other components affecting the modal's appearance and/or 
functionality.

Example 2: backdrop issue with multiple modal

$(document).on('show.bs.modal', '.modal', function (event) {
  var zIndex = 1040 + (10 * $('.modal:visible').length);
  $(this).css('z-index', zIndex);
  setTimeout(function() {
    $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
  }, 0);
});

Tags:

Misc Example

Recent Posts