a1max
@a1max
Учу html, css, js

Как центрировать div в области просмотра страницы?

Здравствуйте.
У меня есть задача - Вызвать div по нажатию кнопки в котором будет блок обратной связи + слайдер.
Сделал для себя тестовый макет, чтобы разобраться, как поверх всех div'ов отобразить данный блок.
Столкнулся с проблемой центрирования, центрирует вверху страницы, а мне нужно, чтобы в любой области сайта при вызове, блок отображался по центру экрана. Также заметил, что на сайтах отключается scroll, когда отображается окно обратной связи. Как можно реализовать это все вместе?

Мой тестовый код: https://jsfiddle.net/maxfloyd/zhku3efw/1/ (лучше смотреть в полноэкранном режиме)
Пример отображения блока:
тыкни
5fde176a25110624943472.png
  • Вопрос задан
  • 76 просмотров
Решения вопроса 1
@vladchv
WordPress Developer
.show {
   display:none;
   position:fixed;
   top:50%;
   left:50%;
   transform:translate(-50%,-50%);
}
.show-open {
   display:block;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@dennis_d
стремлюсь к junior front-end developer
как всегда есть несколько вариантов решения, один из них, поместить модальное окно внутрь overlay (затемнения), которому добавить
display: flex
align-items: center
justify-content: center

это не самый лучший вариант, но если модалка одна, и больше никакого динамического контента не предвидится, то можно. 2й вариант - описан в ответе выше. только вместо fixed можно absolute.

А чтобы скрыть прокрутку в функцию открытия нужно добавить
document.body.style.overflow = 'hidden'
А в функцию закрытия
document.body.style.overflow = 'auto'
Также можно эту конструкцию обернуть в переменную, чтобы не дублировать код, например так
const body = document.body
//open modal
body.style.overflow = 'hidden'

//close modal
body.style.overflow = 'auto'
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы