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

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');
	})

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

Где вот ошибка или что нужно дописать? Никак не пойму.
  • Вопрос задан
  • 3408 просмотров
Подписаться 2 Оценить Комментировать
Решения вопроса 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');
    })
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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