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

Question

lhav @lhav

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

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

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

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

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

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

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

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

Нетология

Веб-разработчик с нуля: профессия с выбором специализации

14 месяцев

Далее
Академия Эдюсон

Fullstack-разработчик на JavaScript + ИИ

11 месяцев

Далее
ProductStar × РБК

Профессия: Инженер по тестированию

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 ещё

Средний
Стоит ли переносить логику работающего онлайн-калькулятора с JS на PHP ради защиты формул от копирования?
- 1 подписчик
- 4 часа назад
- 44 просмотра
2

ответа
JavaScript

Простой
Почему вместо галереи owl-gallery белое пространство?
- 1 подписчик
- 14 часов назад
- 39 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Почему окно fancybox по ajax открывается и сразу закрывается?
- 1 подписчик
- 15 мая
- 65 просмотров
1

ответ
JavaScript

Простой
Как упростить/ улучшить получение данных?
- 1 подписчик
- 14 мая
- 110 просмотров
2

ответа
JavaScript

+1 ещё

Простой
Почему у поля input атрибут required не срабатывает?
- 2 подписчика
- 01 мая
- 337 просмотров
2

ответа
JavaScript

Простой
Будет ли корректно работать сортировка везде?
- 1 подписчик
- 01 мая
- 176 просмотров
4

ответа
JavaScript

Простой
Почему ничего не происходит — элементы p не добавляются на страницу?
- 1 подписчик
- 01 мая
- 112 просмотров
1

ответ
JavaScript

Простой
Почему при написании цикла for of работает, а при другом цикле не работает?
- 1 подписчик
- 15 апр.
- 397 просмотров
3

ответа
JavaScript

Простой
Почему зависает приложение? Почему не работает функция сортировки?
- 1 подписчик
- 14 апр.
- 250 просмотров
1

ответ
JavaScript

Простой
Почему не работает фильтрация?
- 1 подписчик
- 14 апр.
- 184 просмотра
1

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

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

MakeDifference

от 70 000 до 100 000 ₽

Frontend-разработчик (vanilla JS, high-load)

Karma8

от 200 000 ₽

Developer / Right Hand to CTO

ApolloRise Tech

от 2 500 до 3 500 $

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

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

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

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