Модальное окно – маленькое окошко, которое всплывает, чтобы сказать о чем то важном. Сложно ли сделать модальное окно без Bootstrap? Попробуем разобраться.
Куда вставить в DOM?
Обычно, я помещаю его перед закрывающим тэгом body.
[html]
<div class="modal" id="modal"></div>
</body>
</html>
[/html]
В основном по причине стилей. Намного легче позиционировать модальное окно на CSS, когда вы имеете дело со слоем обертывающим весь body, чем с неизвестным набором родительских элементов, у которого потенциально может быть свое позиционирование.
Центрирование
Вот один из моих любимых трюков, когда вы можете отцентровать и вертикально и горизонтально, без знания высоты и ширины.
[css]
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
[/css]
Это очень удобно так как, открытое модальное окно обычно должно находится прямо по центру, несмотря на ширину. Высота, тем более скорее всего изменится, так как она зависит от контента внутри.
Position – fixed?
Обратите внимание мы использовали position: fixed; чтобы пользователи могли иметь возможность скроллить вниз, в то время как открытое модальное окно оставалась всегда посередине. Я считаю, в целом, что значение fixed уже можно смело использовать, даже на мобильных устройствах. Однако, если вам нужно учесть старые телефоны, попробуйте заменить значением absolute.
Разберемся с шириной
На больших экранах, типичное открытое модальное окно не только отцентровано, но и ограниченно по ширине.
[css]
.modal {
width: 600px;
}
[/css]
Однако, есть такие экраны, которые меньше 600px в ширину. Чтобы исправить ситуацию добавим максимальную ширину.
[css]
.modal {
width: 600px;
max-width: 100%;
}
[/css]
Высота
Задавать высотку еще более ответственное занятие. Мы знаем, что контент имеет свойство меняться. Плюс, техника центрирования через transform радостно обрезает края, без появления скролл-бара. Установка максимальной высоты обезопасит нас второй раз.
[css]
.modal {
height: 400px;
max-height: 100%;
}
[/css]
Overflow
После того как мы разобрались с высотой, пришло время заняться свойством overflow. Распространенно использовать overflow значение, прямо в .modal, однако, есть две проблемы с этим:
- Мы можем захотеть использовать элементы, которые не должны скролиться
- Overflow обрежет тень, которую мы будем использовать.
Я бы предложил использовать внутренний контейнер:
[html]
<div class="modal" id="modal">
<!– не скролиться –>
<div class="modal-guts">
<!— скролиться –>
</div>
</div>
[/html]
Учитывая, что у нас будет контент который нужно скролить, нам нужно задать высоту. Есть несколько вариантов. Вот один из них:
[css]
.modal-guts {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* отступы */
padding: 20px 50px 20px 20px;
/* разрешим скролить */
overflow: auto;
}
[/css]
Кнопки
Идея использования модальных окон в том, чтобы принудить выполнить какое-либо действие, перед тем, как что-нибудь будет сделано. Сделать кнопку закрытия окна видной в любом состоянии кажется не плохой идеей.
[html]
<div class="modal" id="modal">
<!– не скролиться –>
<button class="class-button" id="close-button">Закрыть</button>
<div class="modal-guts">
<!— скролиться –>
</div>
</div>
[/html]
Разберемся с затемнением
Обычное модальное окно делают с полностью затемняющимся фоном. Это полезно по нескольким причинам:
- оно может затемнить остальной экран
- может предотвратить клики/взаимодействие с контентом вокруг модального окна
- может использоваться, как гигантская кнопка закрытия
Типичный пример использования:
[html]
<div class="modal" id="modal">
<!– Модалка –>
</div>
<div class="modal-overlay" id="modal-overlay"></div>
[/html]
[css]
.modal {
/* все что мы уже выше описали */
z-index: 1010;
}
.modal-overlay {
z-index: 1000;
position: fixed;
top:0;
left:0;
width: 100%;
height: 100%;
}
[/css]
Закрывать классом, а не открывать классом
Я заметил распространенное явление, когда по умолчанию .modal класс скрыт, как например display: none; Потом, чтобы открыть, добавляют класс .modal.open {display: block;}
Однако, это может быть и плохо, потому что ваша модальное окно может быть display: flex; и display: block; его перепишет.
[css]
.modal {
.display: flex;
}
.modal.closed {
display: none;
}
[/css]
Добавим JavaScript
[js]
var modal = document.querySelector("#modal"),
modalOverlay = document.querySelector("#modal-overlay"),
closeButton = document.querySelector("#close-button"),
openButton = document.querySelector("#open-button");
closeButton.addEventListner("click", function(){
modal.classList.toggle("closed");
modalOverlay.classList.toggle("closed");
});
openButton.addEventListner("click", function(){
modal.classList.toggle("closed");
modalOverlay.classList.toggle("closed");
});
[/js]
Оригинал статьи на CSS Tricks (англ)