Bootstrap 4 Modal Multiple

Question

I’m making a page that uses modal on top of modal (click the button, open modal and when you click the button inside that modal opens another).

I was doing this with bootstrap 3.3.7, BUT now I migrated to version 4 and where I had modal on modal now working strange, the secondary modal is opening behind the primary...

I found nothing on the internet to out with multiple bootstrap 4 modals, only 3...

I had to use a css p/ show the modals

.fade.in {
  opacity: 1;
}
.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

.modal-backdrop .fade .in {
  opacity: 0.5 !important;
}

.modal-backdrop.fade {
  opacity: 0.5 !important;
}

I tried to use that..

$(document).on('show.bs.modal', '.modal', function () {
            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);
        });

try almost everything but version 3 :/

Answer 1

Use this code:

$('.modal').on('show.bs.modal', function(){
   var modS = $('.modal').not($(this)),
       modZ = 0;
   modS.each(function(){
      var zIdx = $(this).css('z-index');
      if(zIdx >= modZ){
         modZ = parseInt(zIdx)+1;
      }
   });
   $(this).css('z-index', modZ);
});

It will make the last open modal have z-index bigger than the others.

Commented code:

$('.modal').on('show.bs.modal', function(){ // detecta abertura da model
   var modS = $('.modal').not($(this)), // seleciona todas as modais menos a que foi aberta
       modZ = 0; // variável para comparar os z-index das modais e armazenar a que tiver o maior
   modS.each(function(){ // loop nas modais
      var zIdx = $(this).css('z-index'); // modal atual do loop
      if(zIdx >= modZ){ // vejo se o z-index da modal do loop é maior ou igual do que a variável
         modZ = parseInt(zIdx)+1; // se for maior ou igual, somo +1 ao valor 
      }
   });
   $(this).css('z-index', modZ); // aplico o valor ao z-index da modal aberta
});