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

Question

lhav @lhav

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

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

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

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

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

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

Подписаться 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

Средний
Эффект наложения блоков?
- 1 подписчик
- 20 минут назад
- 14 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как изменить содержание блока програмно со свойством contentEditable?
- 1 подписчик
- 33 минуты назад
- 9 просмотров
0

ответов
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- 46 минут назад
- 11 просмотров
0

ответов
JavaScript

Простой
Как после сабмита очистить поле type="tel" и показать очищенную маску?
- 1 подписчик
- 5 часов назад
- 44 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Почему при добавление переменно в style, она перестаёт обновляться?
- 1 подписчик
- вчера
- 65 просмотров
1

ответ
JavaScript

Простой
Как получить результат отправки на сервер, если fetch-запрос был в одной функции, а результат нужен в другой?
- 1 подписчик
- вчера
- 75 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Существуют ли браузерные реализации WebView для AJAX и Fetch?
- 1 подписчик
- вчера
- 85 просмотров
1

ответ
JavaScript

Простой
Как обрабатывать пользовательский запрос больше не показывать конкретный попап?
- 1 подписчик
- вчера
- 67 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать появление баннера от определенной высоты?
- 3 подписчика
- вчера
- 586 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Запуск установки приложения PWA при загрузке страницы?
- 2 подписчика
- 21 апр.
- 215 просмотров
0

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

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

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

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

вАйТи

от 5 000 до 25 000 ₽

JavaScript Fullstack

OnClass

от 200 000 до 600 000 ₽

Разработка дизайна раздела «Статьи» на сайте «Мир отходов»

23 апр. 2024, в 23:01

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

Дизайн личного кабинета (клиентская часть)

23 апр. 2024, в 22:37

500 руб./в час

Скрипт для Solana быстрый

23 апр. 2024, в 22:33

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

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

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

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

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