CODEWITHSUNDEEP
javascriptcssmodal-dialogbootstrap-modal
Hirad Roshandel
Hirad Roshandel

Reputation: 2187

Second modal doesn't put backdrop on first one

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">

Upvotes: 1

Views: 2602

Answers (2)

Shehary
Shehary

Reputation: 9992

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.

Upvotes: 3

Tasos K.
Tasos K.

Reputation: 8079

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.

Upvotes: 0

Related Questions