Bootstrap: modal over modal

Question

Я пытался найти простую функцию, которая могла бы накладывать модалы друг на друга, чтобы один модальный мог вызвать второй. Это означает, что модалы должны быть один над другим, используя z-индекс, и поэтому нам нужно сделать то же самое на фоне (полупрозрачное наложение).

Я нашел несколько плагинов, некоторые ответы с использованием чистого css и т. Д. Вот мой, если он может вам помочь, вам не нужно ничего добавлять, кроме этих нескольких строк!

Answer 1

$('.modal').on('show.bs.modal', function() { 
     var nModals = $('.modal.in').length; 
     $(this).attr('data-nmodals', nModals+1); 
     backdropStack(nModals); 
    }); 
    function backdropStack(nModals) { 
     setTimeout(function() { 
      $('.modal-backdrop').each(function() { 
       if(!$(this).attr('data-nmodals')) { 
        $(this).attr('data-nmodals', nModals+1); 
       } 
      }); 
      modalStack(); 
     }, 100); 
    }; 
    function modalStack() { 
     $('.modal').each(function() { 
      $n = $(this).data('nmodals'); 
      $z = $(this).css('z-index'); 
      $(this).css('z-index', $n*$z); 
     }); 
     $('.modal-backdrop').each(function() { 
      $n = $(this).data('nmodals'); 
      $z = $(this).css('z-index'); 
      $(this).css('z-index', $n*$z); 
     }); 
    } 

Объяснение: Каждый раз, когда модальный открывает, мы рассчитываем на существующие модальности и дать им номера, чтобы идентифицировать их (данные атрибутов-nmodals). Поскольку фон появляется через несколько секунд, мы ожидаем 100 миллисекунд, прежде чем считать их в функции backdropStack. И последнее, но не менее важное: функция modalStack умножает существующее значение z-index на число nModals, что означает, что мы могли бы открыть до 20 модалов, и это решение по-прежнему будет работать.

Предел - максимальный z-индекс, принятый CSS3 и браузерами. Если вы доберетесь до этого момента ... у вас, вероятно, проблема с дизайном UX!