Почему модальное окно сдвигает контент (Bootstrap 3)?

Question

[gcj]

bootstrap-3.ru/javascript.php#modals-examples
При нажатии на "Посмотреть демо", появившееся модальное окно сдигает контент влево. Чем это лечится?
Так же фиксированная панель при этом дергается (заполняет пустое пространство вместо полосы прокрутки на мгновенье, в момент когда мы закрываем модальное окно).

Как это исправить, не прибегнув при этом к использованию сторонних скриптов и так далее?

Answer 1

[Дима Паутов]

А вы сами подумайте! Посмотрите, что происходит при открытии модального окна? Фишка в том, что почти все модальные окна написанные вручную - это по сути не модальные окна, а так, визуальная иллюзия настоящих модальных окон, таких как alert(). Почитайте что такое модальное окно.

К чему я это, когда появляется это окно, то тегу body добавляется overflow, что мы не могли прокручивать сайт, когда скролим его мышкой. А раз полоса прокрутки скрывается, то и контент расширяется на ширину этого скроллбара. Обычно он 17px шириной - это на десктопе.

Что бы это так сказать вылечить, можно добавлять к тегу body padding-right: 17px, когда мы вызываем наше модальное окно и тот же стиль для самого окна.

Comments

[gcj]

Я, кажется, не спрашивал о том, что происходит при появлении модального окна. И причем здесь модальные окна написанные вручную тоже мало понятно. Body присваиется 17px, но это не решает вторую проблему: фиксированная шапка дергается в любом случае.
Проблему решил другим способом: shpargalkablog.ru/2014/12/shift-sait-scrollbar.html

[rojer89]

gcj, вы даже не представляете, как вы меня выручили!
Огромное спасибо за то, что поделились ответом!