Модальное окно на чистом HTML — тег dialog

🗂️ Смотри бесплатные курсы по фронтенд-разработке на канале:
🟠 Курс по HTML
🔵 Курс по CSS
🟡 Курс по JS
🟢 Курс Accessibility
⚪️ Мастер-класс по верстке для новичков
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS)

💬 Чат в телеграмме (помощь новичкам):
@friendlyFrontendChat

ℹ Основной канал:
@friendlyFrontend

P. S. Код из видео — в основном телеграм-канале 🙂

#shorts #frontend #фронтенд #html

[AleksanderLamkov]

💬 Коммьюнити-чат в телеграме:
@FriendlyFrontend

🧑‍💻 Основной телеграм-канал:
@AleksanderLamkov

[Maks_Sizii_]

Как хорошо, что Ютуб мне порекомендовал твой канал.

[Anatoli-bqpe]

Я уже постоянно использую <dialog>. А что бы закрывать модалку по клику на подложку, а не только по кнопке, можно сравнивать currentTarget и target. Как один из вариантов.
"Дока" в помощь

[igorkorgi]

Всё супер, но обращайте внимание на требования к проекту и поддержке в браузерах. Если веб приложение для бизнеса, у которого стоят старые компы на 7-ой винде с IE, то dialog не сработает. Плюс спорное решение с использованием тега form, всё таки form чаще используется для отправки запроса на сервер, а один из принципов чистого кода - не надо удивлять других разработчиков. Так что лучше закрытие в js реализовать, тем более надо ещё поддержать закрытие по клику за областью модалки, что тоже делается в js.

[michaelkamko]

Не знал, хотя часто делаю модалки. Спасибо!

[howard_roark]

До сих пор много ограничений. Высплывающие пикеры в селектах, датапикерах, тултипы и т.д. нормально не отрисовать из-за top layer. Как и крестик снаружи для закрытия (хотя это уже рудимент UX на мой взгляд)

[mikaelgevorgyan]

😮😮😮Так погоди, уже только можно вставить в form и готово и писать кода не надо? Круть😊😊😊, пусть еще слацдер добавят, будет вообще улееет 0о0 и скролл и слайдер

[Clod.X]

Я пока буду использовать ручное управление )

[AvidorKatz]

О прикольно. Отложил в закладки и сейчас пригодилось. Но как на счет с закрытием модалки? Чтоб анимировать закрытие нужно как раньше добавить какой-то класс с анимацией, на событие transitionend или animationend уже непосредственно вызвать метод закрытия модалки? Или есть какие-то методы получше?

PS. Уже нашел информацию об allow-discrete, но эта опция не работает в лисе. Ну и поскольку контент модального окна скорее всего зависит от какого-то стейта и его при закрытии модалки нужно чистить, то всё равно пришлось подписаться на событие transitionend ато анимация закрытия в хроме есть, но в процессе модалка схлопывается из-за того что контент уже удален из стейта.

[dmitriyv]

Я лично против использовния html готовых решений типа окон, аккордеонов, select и подобное, так как все работает не так как нужно, а исправлять это опять костыль.

[nojik-ejik]

Все конечно хорошо. Но если только эпл придерживались бы стандартов веб3

[ForeverDarkDeath]

1. у диалога много багов с z-index - он перекрывает абсолютно всё на странице -- нельзя поверх него вывести другой какой-то контент пока он открыт.

2. нельзя задать анимацию появления и скрытия диалогового окна.

[yelstofs]

Пока не использую, чаще всего нужна хорошая поддержка и ajax, в целом мне нравится, надо будет постепенно начинать применять:)

[xelth]

если вы всё еще кипятите - забейте... достаточно просто спросить чат жпт ;)

[abaahi]

Нифига не смог запустить у себя в пет проекте. Лучше я по старинке

[sunfurry]

Давай, сделай вторую рекапчу в top layer

[via]

Можно ли показать какой-либо элемент размётки поверх диалога, например боковую панель, при этом диалог должен быть смещен на её размер от левой границы окна

[TipAnswer]

Есть ролик о слоях ? Ты сказал слой Top layer какие элементы в него входят ? Обычному разработчику доступен этот слой или только внутрянка?

[legocreator]

А возможно это объединить с некой логикой, которая позволит также закрывать модалку привычным способом - через клик за её пределами?

[jenyaspace]

Короче скоро Вообще нигде нам JavaScript не понадобится