Генератор модального окна (всплывающее окно) с dialog

Генератор модального окна (всплывающее окно) с dialog: для чего нужен

Модальные окна нужны, чтобы подтвердить действие, показать короткую форму или выделить призыв, не уводя человека со страницы. Сделанные вручную на div, они часто плохо работают с клавиатурой и скринридером.

Этот генератор использует элемент dialog с showModal(), который поддерживают все современные браузеры с 2022 года: браузер размещает окно сверху, делает остальную страницу неактивной, удерживает фокус, закрывает по Esc и возвращает фокус на кнопку. Код добавляет стиль, закрытие по щелчку снаружи и плавное появление через @starting-style, учитывающее тех, кто предпочитает меньше движения.

Как пользоваться

1. Напишите заголовок, текст и кнопки.
2. Выберите цвет, ширину и скругление.
3. Проверьте в предпросмотре и скопируйте код.

Когда использовать

• Призыв записаться через мессенджер.
• Подтверждение перед действием.
• Уведомление о новинке или короткая форма.

Частые вопросы

Зачем использовать элемент dialog?

С showModal() браузер размещает окно поверх всего, делает остальную страницу неактивной, удерживает фокус внутри окна, закрывает по Esc и возвращает фокус на кнопку, которая его открыла. Раньше для этого требовалось много JavaScript, и почти всегда оставались проблемы с доступностью.

Работает ли во всех браузерах?

Да, dialog поддерживают Chrome, Edge, Firefox и Safari с 2022 года.

Можно ли открывать модальное окно сразу при входе на сайт?

Можно, но всплывающее окно, которое открывается без просьбы пользователя, обычно раздражает, а на телефонах поисковики могут понижать страницы с навязчивой рекламой, закрывающей содержимое. Лучше открывать по кнопке.

Правда бесплатно?

Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.

Похожие инструменты