Задать вопрос
@gcj

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

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

Как это исправить, не прибегнув при этом к использованию сторонних скриптов и так далее?
  • Вопрос задан
  • 2461 просмотр
Подписаться 2 Оценить Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Stepik
    Основы HTML и CSS
    2 недели
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Пригласить эксперта
Ответы на вопрос 1
bootd
@bootd Куратор тега CSS
Гугли и ты откроешь врата знаний!
А вы сами подумайте! Посмотрите, что происходит при открытии модального окна? Фишка в том, что почти все модальные окна написанные вручную - это по сути не модальные окна, а так, визуальная иллюзия настоящих модальных окон, таких как alert(). Почитайте что такое модальное окно.

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

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

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

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