Как убрать смещение контента при всплывании модального окна?

Question

[syncher]

Вся страница смещается в сторону, когда вылазит алерт и исчезает скролл. Как можно исправить этот неприятный UX? Пример - t4t5.github.io/sweetalert

Answer 1

[Андрей Верх]

Судя по демке, реализация не очень удачная. Просто на body вешается класс с

body.stop-scrolling {
    overflow: hidden;
}

собственно из-за того что скролл прячется и происходит смещение.

Можно попробовать padding-right:16px Добавить

Comments

[syncher]

Попробую спс. А есть вариант просто как-то оставлять скролл на заднем плане после появления модалки?

[Андрей Верх]

syncher: Можно, но не в текущей реализации плагина. Если вы поставите overflow:scroll, то контент будет на заднем фоне прокручиваться. Должна быть ещё одна обёртка у окна, которой тут нет.

Просто выберите другой плагин.

[Андрей Верх]

Плюс если модальное окно высокое, то оно тоже будет overflow:hidden, так что плагин не продуман...

[syncher]

Андрей Верх: посоветуйте пожалуйста лучшие реализации, желательно без jQuery. Сейчас начал изучать Реакт, может есть специальные компоненты?

Answer 2

[Александр Таратин]

Пободные проблемы в большинстве модальных скриптов.
Используйте эти arcticlab.ru/arcticmodal/#examples модалки

Comments

[Ruslan Website]

в этом скрипте абсолютно то же самое