Я написал статью о создании своего модала вместо использования плагина.
На днях я перепостил ее в Twitter, и Jhey сделал хороший комментарий, что в наши дни это можно быстро сделать с помощью диалогового элемента.
Я сделал Astro-версию с использованием диалога, но не записал для вас простую версию.
Итак, в этой статье мы создадим модальную форму с помощью элемента dialog.
Элемент dialog
Основной элемент, с которым мы будем работать сегодня, — это элемент dialog.
Это HTML-элемент, который по умолчанию является диалоговым (не модальным).
Он может принимать открытое состояние, указывая, открыт он или нет.
<dialog open>
<p>Hello from the dialog</p>
</dialog>
Приведенный выше код отобразит диалог прямо на нашей странице вот так.
Вы заметите, что он не является модальным и не имеет фона.
Динамическое открытие модала
Обычно мы хотим открыть диалог с помощью какого-либо действия.
К счастью для нас, диалог поставляется с API JavaScript.
Если вы присвоите диалогам определенный ID, мы сможем нацелиться на них.
<dialog id="mydialog">
<p>Hello I only show on click</p>
</dialog>
Затем мы можем использовать JavaScript для открытия модального окна следующим образом.
window.mydialog.show();
Однако я бы рекомендовал использовать более явную функцию showModal.
Эта функция превращает диалог в модальный, позволяя нам иметь фон и центрируя его на странице.
window.mydialog.showModal();
Конечно, довольно редко диалог отображается непосредственно в браузере, поэтому давайте будем показывать его только при нажатии на кнопку.
<button onclick="window.mydialog.showModal();">show modal</button>
<dialog id="mydialog">
<p>Hello I only show on click</p>
</dialog>
Закрытие модального окна
Существует два способа закрытия модала. Первый — использовать функцию close на диалоге, как показано ниже:
<button onclick='window.mydialog.close();'>close modal</button>
В качестве альтернативы вы можете использовать HTML-способ закрытия диалога.
Вы можете поместить форму с методом dialog внутри элемента dialog.
<form method="dialog">
<button>Close</button>
</form>
Стилизация модального фона
Последняя часть того, почему диалог — это круто, заключается в том, что вы можете стилизовать некоторые пользовательские элементы.
Мы получаем новый псевдоэлемент ::backdrop для стилизации фона модала.
dialog::backdrop {
background: rgba(255, 0, 0, 0.1);
}
Теперь мы должны получить розоватый цвет фона при открытии модала.
Затем, конечно, вы можете стилизовать каждый элемент диалога по своему усмотрению.
Вопросы доступности
Приятно отметить, что и по сей день существуют некоторые проблемы с доступностью.
Но, опробовав его, можно сказать, что большинство браузеров в наши дни также получили полную поддержку фокуса внутри диалога, и он выглядит как полноценное доступное решение.
Читайте подробнее об опасениях.
Заключение
Элемент диалога, открытые API и возможности стилизации — отличный способ создания модалов в наши дни.
Я обязательно опробую их в одном из проектов в ближайшее время.
Если вы хотите поиграть с диалоговым элементом, я создал для вас этот CodePen.
Спасибо, что прочитали, и давайте общаться!
Спасибо, что читаете мой блог. Не стесняйтесь подписываться на мою рассылку по электронной почте и подключайтесь к Facebook или Twitter.