1

So I'm having a bootstrap modal which pops up when you click on a button. Within that modal there is a button that opens another modal on top of the first one. However the dark background doesn't fall on top of the first modal and instead goes behind it.

Here is first modal:

<div class="modal fade" id="result-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">

Here is my second modal:

<div class="modal fade" id="resultdetail-modal" tabindex="-1" role="dialog" aria-labelledby="resultdetail-modal">
<div class="modal-dialog " role="document">
 <div class="modal-content">
 <div class="modal-body">
Hirad Roshandel
  • 2,175
  • 5
  • 40
  • 63
  • 1
    In addition to the accepted solution, this might be of interest: https://stackoverflow.com/questions/39588698/bootstrap-multiple-modals-modal-backdrop-issue – Andrei Bordeanu Jul 03 '17 at 13:10

2 Answers2

2

Add this script and it will solve the problem

$(document).ready(function () {
    $('#resultdetail-modal').on('show.bs.modal', function () {
        $('#result-modal').css('z-index', 1039);
    });

    $('#resultdetail-modal').on('hidden.bs.modal', function () {
        $('#result-modal').css('z-index', 1041);
    });
});

Fiddle

Reason: why dark background doesn't fall on top of the first modal and instead goes behind it.

Any z-index value below 1039 will put things behind the backdrop.

So by using bootstrap's modal event handles set the z-index to 1039 if #resultdetail-modal is shown and set the z-index back to 1041 if #resultdetail-modal is hidden and #result-modal is showing again.

Shehary
  • 9,926
  • 10
  • 42
  • 71
0

By default, all modals have the same z-index property. If you need to ensure that the div#resultdetail-modal will always be placed on top of the other modal, add this to your CSS.

#resultdetail-modal {z-index:1050;}

P.S. Any value bigger than 1040 will work.

Tasos K.
  • 7,979
  • 7
  • 39
  • 63