Задать вопрос

Bootstrap 3, как зафиксировать родительскую страницу при хитром вызове Modal окна?

При открытии модального окна в body добавляется класс .modal-open { overflow: hidden; } и страница сайта фиксируется.

В моем случае непосредственно из открытого модального окна вызывается второе модальное окно (первое при этом закрывается, чтобы они не накладывались друг на друга).
Так вот при таком вызове второго окна modal-open почему-то не добавляется в body и соответственно, родительская страница скроллится.
Ничего вроде страшного, но напрягает.

Каким образом поправить этот момент?

Пробую принудительно сделать так:
$('#Modal2').on('show.bs.modal', function (e) {
	  $('body').addClass('modal-open');
	})

Работает в ФФ, а в хроме и сафари - нет.
Пробую так:
$('#Modal2').on('show.bs.modal', function (e) {
	 $('body').css('overflow','hidden');
	})

В этом случае все везде работает, но при закрытии окна страница не "расфиксируется", прокрутка не работает.
Можно дописать на закрытие тоже:
$('#Modal2').on('show.bs.modal', function (e) {
	 $('body').css('overflow','hidden');
	});
$('#Modal2').on('hidden.bs.modal', function (e) {
	 $('body').css('overflow','auto');
	})

Вроде все ок, но возникает другая проблема. Если потом, после такого закрытия, еще раз вызвать любое модальное окно, то страница уже не фиксируется (до рефреша браузера, конечно).

Где вот ошибка или что нужно дописать? Никак не пойму.
  • Вопрос задан
  • 3410 просмотров
Подписаться 2 Оценить Комментировать
Помогут разобраться в теме Все курсы
  • Нетология
    Fullstack-разработчик на Python + нейросети
    20 месяцев
    Далее
  • Skillfactory
    Профессия Веб-разработчик
    12 месяцев
    Далее
  • Академия Eduson
    Fullstack-разработчик на JavaScript
    11 месяцев
    Далее
Решения вопроса 1
pingo
@pingo
на все id повесь обработчик, у тебя только на втророе окно вроде. ещё кэш почистить рекомендуется
$('#Modal2, #Modal1').on('show.bs.modal', function (e) {
     $('body').css('overflow','hidden');
    });
$('#Modal2, #Modal1').on('hidden.bs.modal', function (e) {
     $('body').css('overflow','auto');
     $(this).removeData('bs.modal');
    })
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы