Bootstrap: перекрывающийся модал не должен заморозить базовый модал от прокрутки

Question

Я ЗНАЮ, что Bootstrap препятствует перекрывающимся модалам. Я очень быстро взломал сайт, чтобы разобраться со всем, что связано с коронавирусом, и поэтому я сосредоточился на скорости, а не на том, чтобы все было идеально. Следовательно, сегодня кто-то указал на ошибку. Обычно, что происходит с Bootstrap модальным:

• Bootstrap устанавливает прокрутку автоматически на основе модального содержимого, то есть если контент требует прокрутки, я думаю, что добавляется соответствующий CSS
• Когда модальное окно открыто, фоновое содержимое (покрытое затемненным наложением) не прокручивается
• Когда модальное окно закрыто, фоновое содержимое снова становится прокручиваемым

Моя проблема сейчас заключается в том, что в моей ситуации с перекрывающимися модами второй модал, открывающийся поверх первой, приводит к тому, что содержимое первого мода остается не прокручиваемым, даже когда второй, перекрывающийся модал закрыт.

Мое желаемое поведение заключается в том, что, когда второй модальный режим закрыт, первый модальный возвращается в значение «по умолчанию», то есть, если контент требует прокрутки, прокрутка возвращается.

Вот действующий сайт: https://www.giftcardsforsmallbusinesses.com/

1. Нажмите, чтобы следовать модальному режиму: Если вы хотите быть в списке здесь, нажмите здесь (убедитесь, что вы просматриваете его на экране, когда модальное содержимое требует прокрутки, а это большинство экранов ... это много контента)
2. В появившемся модальном меню найдите № 4 в разделе «Как это работает» и нажмите бонус
3. Появится второй маленький модал
4. Теперь закройте второй, меньший модал
5. Теперь вы заметите, что первый модал: Вы владелец малого бизнеса? больше не прокручивается Любопытно, что фоновое содержимое, оригинальная страница, теперь можно прокручивать

Я чувствую, что здесь есть быстрый и грязный ответ ... Я могу просто вставить что-нибудь, где это похоже на

PSEUDOCODE
$("#second-modal").on("close", function() {
  $("#first-modal").resetDefault()
})

Но у меня недостаточно опыта работы с Twitter Bootstrap, чтобы знать, как это сделать, и я не смог найти ответ в документации.

Answer 1

Это должно исправить это ...

$('.modal').on("hidden.bs.modal", function (e) { 
    if ($('.modal:visible').length) { 
        $('body').addClass('modal-open');
    }
});

Когда вы закрываете перекрывающийся бонусный модал, он по умолчанию удаляет класс тела .modal-open (не зная, что под ним есть другой модал). Этот класс применяет overflow:hidden; к телу и позволяет модалам прокручиваться независимо.

Таким образом, приведенный выше скрипт в основном добавляет класс снова, когда бонусный модал закрыт / скрыт.

---

Попробуйте, это прямо нацелено на бонусное модальное скрытое событие.

$('#expirationModal').on('hidden.bs.modal', function () {
  $('BODY').addClass('modal-open');
})