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

Question

lhav @lhav

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

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

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

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

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

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

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

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

Ответы на вопрос 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

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 3 часа назад
- 43 просмотра
1

ответ
JavaScript

+4 ещё

Сложный
Почему в WebSockets History в Burp Suite отображаются кракозябры?
- 1 подписчик
- 22 часа назад
- 72 просмотра
2

ответа
JavaScript

Простой
Как выводить JS код?
- 2 подписчика
- вчера
- 372 просмотра
1

ответ
JavaScript

Простой
Как заставить срабатывать trigger change в Select2?
- 1 подписчик
- вчера
- 47 просмотров
0

ответов
JavaScript

Простой
Почему появляется ошибка Uncaught Reference?
- 1 подписчик
- 20 дек.
- 81 просмотр
2

ответа
JavaScript

Средний
Порождается ли событие в элементе или оно само по себе?
- 1 подписчик
- 20 дек.
- 93 просмотра
1

ответ
JavaScript

+2 ещё

Средний
Как можно изменить настройки модуля навигации карт Google на Яндекс карты?
- 2 подписчика
- 19 дек.
- 201 просмотр
2

ответа
JavaScript

+2 ещё

Простой
Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?
- 1 подписчик
- 19 дек.
- 94 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Как загрузить img в первой очереди при загрузке страницы?
- 1 подписчик
- 19 дек.
- 82 просмотра
1

ответ
JavaScript

+2 ещё

Средний
Какие есть высокоуровневые компонентные javascript фреймворки?
- 1 подписчик
- 19 дек.
- 163 просмотра
1

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

Веб-дизайн клининговой компании

22 дек. 2024, в 17:54

10000 руб./за проект

Нарисовать UX/UI дизайн для игры. Нарисовать несколько иконок для игры

22 дек. 2024, в 17:45

10000 руб./за проект

Написать макросы для excel

22 дек. 2024, в 17:39

2000 руб./за проект

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)?

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

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

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