52 подписчика
👩💻 Нативные модалки
#frontend #браузеры
Пару лет назад, я писал про предложение о добавлении элемента, который стал бы нативным попапом. Судя по комментарию в топике этого предложения, идея элемента popup была перенесена в новую концепцию — Popover API. К моему удивлению, в данный момент это API поддерживается большинством современных браузеров, кроме Firefox. Подробности с примерами можно почитать, как в переводе на хабре, так и в оригинале. К своему стыду, я упустил новость о внедрении этого API в браузеры, хотя это произошло уже почти год назад. Постараюсь найти время и собрать под это дело интерактивную демку.
Внедрение различных новых фич в браузеры -- это всегда повод для радости. В декабре я писал про свойство field-sizing (на момент публикации, в интернете об этом почти не было постов, я в числе первых, кто написал об этом на русском языке), сегодня хочу поделиться с вами новостью про добавление нового элемента <dialog>.
Как этим пользоваться?
Я собрал небольшую демку на codepen, где используется элемент <dialog> для отрисовки модального окна. Есть минимальная стилизация. Давайте разберём эту демку и попробуем как-то её усложнить.
<style>
::backdrop {
background: #000;
opacity: 0.75;
}
dialog {
border: unset;
border-radius: 10px;
}
dialog form {
display: flex;
justify-content: end;
}
</style>
<button onclick="dialog.showModal()">Открыть модалку</button>
<dialog id="dialog">
<p>Это нативное модальное окно</p>
<form method="dialog">
<button>ОК</button>
</form>
</dialog>
Начнём со стилизации, псевдокласс ::backdrop позволяет отрисовать затемнение общего фона страницы, чтобы отделить модальное окно от всего остального интерфейса. Стилизация самого элемента и формы не так интересна, её можно пропустить.
Дальше по коду идёт кнопка, с обработчиком onclick, в котором обозначен вызов метода showModal() на элементе с id dialog. Внутри тела самого модального окна есть форма, которая отвечает за различные действия, которые можно совершить. По умолчанию, нажатие на кнопку будет закрывать модальное окно.
Логично, что модальные окна могут быть не только информационными, одного закрытия по кнопке маловато. Изменить это можно следующим образом:
<button onclick="dialog.showModal()">Открыть модалку</button>
<dialog id="dialog">
<p>Хотите продолжить?</p>
<form method="dialog">
<button type="submit" value="no">Нет</button>
<button type="submit" value="yes">Да</button>
</form>
</dialog>
<script>
dialog.addEventListener('close', (event) => {
if (dialog.returnValue === 'yes') { /* ... */ }
});
</script>
Таким образом, мы получаем полнофункциональное модальное окно, которое можно и нужно использовать вместо самописных велосипедов. Доступность у такого элемента точно будет выше, чем у написанного руками. Бывают случаи, когда фремйворки соблюдают рекомендации WAI ARIA, как например, Bootstrap. Но если есть возможность заменить ненативный элемент нативным, это всегда большой плюс.
2 минуты
22 января 2024