Как зафиксировать родительскую страницу Modal окна (Twitter Bootstrap)?

Question

lhav @lhav

Как зафиксировать родительскую страницу Modal окна (Twitter Bootstrap)?

Используется Twitter Bootstrap.

Необходимо зафиксировать (что бы не скролилась) родительскую страницу, на которой открыли модальное окно.

По-умолчанию она прокручивается вместе с содержимым модального окна.

Вопрос задан более трёх лет назад
7601 просмотр

Комментировать

Подписаться 6 Оценить Комментировать

Помогут разобраться в теме Все курсы

Яндекс Практикум

Фронтенд-разработчик

10 месяцев

Далее
Skillbox

JavaScript

3 месяца

Далее
Нетология

Fullstack-разработчик на Python + нейросети

20 месяцев

Далее

Пригласить эксперта

Ответы на вопрос 2

4 комментария

7 комментариев

Артур Кох @dudeonthehorse

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

Написано более трёх лет назад
Артур Кох @dudeonthehorse

*общего лейаута

Написано более трёх лет назад
lhav @lhav Автор вопроса

Прошу прощения, но я совсем далек от JS, потому просто подключил вашу строчку в странице. В итоге она не скролится даже когда модальное окно не открыто.

Написано более трёх лет назад
Артур Кох @dudeonthehorse
<head> $('#button').click(function(){ $('body').css('overflow','hidden'); }); $('#close').click(function(){ $('body').css('overflow','auto'); }); </head>

#button — кнопка вызывающая открытие модального окна
#close — кнопка закрывающая модальное окно
Написано более трёх лет назад

Артур Кох @dudeonthehorse

Поправочка :)

<head>
	<script src="jquery.js"></script>
	<script>
		$('#button').click(function(){
			$('body').css('overflow','hidden');
		});
		
		$('#close').click(function(){
			$('body').css('overflow','auto');
		});
	</script>
</head>

Написано более трёх лет назад

lhav @lhav Автор вопроса

Работает, но в таком случае не прокручивается сам контент модального окна.

Написано более трёх лет назад
Артур Кох @dudeonthehorse
$('#modal-window').css('overflow','auto');

Но товарищ Макиавели подсказывает дельный вариант. Я же привел универсальный способ. Не только для бутстрапа.
Написано более трёх лет назад

Ваш ответ на вопрос

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

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

JavaScript

+1 ещё

Простой
GrammyJS | Почему после оплаты не отрабатывает эвент message:successful_payment?
- 1 подписчик
- 28 нояб.
- 78 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Элемент стилизации на js, как сделать чтобы не было резкой смены картинки фона?
- 1 подписчик
- 27 нояб.
- 144 просмотра
1

ответ
JavaScript

Простой
Переход по ссылке с параметром на конкретный узел в vis.js?
- 1 подписчик
- 24 нояб.
- 110 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как сделать сложную виртуализацию?
- 1 подписчик
- 22 нояб.
- 248 просмотров
2

ответа
JavaScript

Простой
В цикле for много кнопок как сделать .addEventListener('click', к каждой кнопке?
- 1 подписчик
- 16 нояб.
- 284 просмотра
3

ответа
JavaScript

+2 ещё

Простой
Как получить события VK.VideoPlayer используя JS?
- 1 подписчик
- 11 нояб.
- 169 просмотров
1

ответ
JavaScript

+1 ещё

Сложный
Почему зависает виджет в OBS?
- 1 подписчик
- 10 нояб.
- 199 просмотров
0

ответов
JavaScript

Простой
Смещение группы в fabric.js?
- 1 подписчик
- 06 нояб.
- 138 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как сделать горизонтальный скролл стрелками?
- 1 подписчик
- 05 нояб.
- 269 просмотров
1

ответ
JavaScript

Простой
Как создать рисунок из PHP в Fabric.js?
- 2 подписчика
- 28 окт.
- 182 просмотра
1

ответ
Показать ещё Загружается…

Fullstack JavaScript разработчик

MakeDifference

от 60 000 до 110 000 ₽

React разработчик

ITK academy • Нижний Новгород

от 50 000 до 90 000 ₽

Frontend Developer (React + Node.js)

Alfabet Service

от 1 000 до 2 000 $

Answer 1 · 2012-06-19 11:42:43

Можно обойтись без JS, при открытии модального окна, Twitter Bootstrap сам ставит класс modal-open для body. Достаточно будет в CSS добавить
.modal-open { overflow: hidden; }

Answer 2 · 2012-06-19 11:05:19

Артур Кох @dudeonthehorse

Email Developer

$('body').css('overflow','hidden');

Ответ написан более трёх лет назад

7 комментариев

Как зафиксировать родительскую страницу Modal окна (Twitter Bootstrap)?

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

Минуточку внимания

Войдите на сайт