Bootstrap 4 multiple modal

Question

Bootstrap 4 multiple modal

Navigation

#1 by (0 votes)

0

I'm making a page that uses modal over modal (click the button, opens modal and when you click the button inside that modal opens another).

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

I did not find anything on the internet with multiple bootstrap 4 modes, just 3 ...

I had to use a css to show the modal

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

$(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 practically everything else from version 3: /

javascript html bootstrap-4 modal

asked by anonymous 19.02.2018 / 13:37

1 answer

Open an excel file when opening an activity sonarqube run syncronas rules

score 0 · 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 greater 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
});