Что такое диалоговое окно браузера

Обновлено: 21.11.2024

Этот модуль содержит диалоговые окна.

Классы

InfoDialog(название, сообщение, *, top=None, left=None, default_css=True, remove_after=None, ok=False)

title – это заголовок окна.
message — это сообщение для печати
если указано верхнее и левое, то это положение блока относительно верхней и левой границ видимой части документа. По умолчанию поле располагается по центру
default_css указывает, следует ли использовать таблицу стилей, предоставленную модулем. Если установлено значение False , используются стили, определенные на HTML-странице (см. «Стиль CSS» ниже)
remove_after – количество секунд, по истечении которых окно автоматически закрывается.
ok указывает, должна ли присутствовать кнопка "ОК". Если переданное значение является строкой, оно будет напечатано на кнопке; если это True , печатается строка "Ok"

EntryDialog(title, message=None, *, top=None, left=None, default_css=True, ok=True)

Отображает диалоговое окно с подсказкой и зоной ввода. Когда пользователь нажимает кнопку "ОК" или клавишу ввода внутри зоны входа, в экземпляре EntryDialog запускается событие, называемое "вход".

title, top, left, default_css и ok такие же, как и для InfoDialog
message – это необязательное сообщение с подсказкой, которое печатается слева от зоны входа.

Экземпляры EntryDialog имеют значение , строку, введенную в зону ввода. Это значение можно использовать в обработчике события "вход".

Диалоговое окно(название, *, top=Нет, left=Нет, default_css=True, ok_cancel=False)

title, top, left и default_css такие же, как указано выше
ok_cancel указывает, должны ли отображаться кнопки "ОК" и "Отмена". Если переданное значение представляет собой список из 2 элементов или кортеж строк, эти строки будут напечатаны на кнопках; если значение равно True , печатаются строки "Ok" и "Cancel"

Экземпляры диалоговых окон имеют следующие атрибуты:

panel: элемент DIV, в который можно вставить дополнительные элементы для создания диалогового окна.
ok_button : кнопка "ОК", если она есть. Обработчик события должен быть определен для события "щелчок".

Стили CSS

Если аргумент default_css, переданный в меню, имеет значение True , следующая таблица стилей вставляется в текущую HTML-страницу:

Чтобы настроить диалоговые окна, задайте для default_css значение False и переопределите классы CSS. Самый простой способ — скопировать приведенную выше таблицу стилей и отредактировать ее.

Элементы диалогового окна и стили CSS

Различные элементы диалогового окна имеют следующие свойства и классы CSS:

Несмотря на то, что методы JavaScript alert , confirm и prompt удобны, их не рекомендуется использовать из-за их поведения, блокирующего скрипты. Вот почему мы работали с другими поставщиками браузеров над улучшением спецификации за последние несколько лет. Самые важные разговоры касались доступности.

Вы можете найти более сложные варианты использования, такие как диалоги оплаты, в Интернете. В настоящее время к ним обращаются кастомные решения из таких фреймворков, как Bootstrap. К сожалению, они не удобны в использовании и не всегда доступны. Мы считаем, что Интернет заслуживает простого и безошибочного решения для таких случаев использования. По этой причине Safari Technology Preview 134 и бета-версия Safari 15.4 вводят этот элемент!

Как использовать?

Давайте создадим простое диалоговое окно подтверждения:

Диалоги скрыты по умолчанию. Мы можем использовать метод showModal() для отображения диалогового окна. Когда он показан, диалог можно закрыть с помощью метода close().

Вот пример:

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

Пример диалогового окна подтверждения

Модальные и немодальные диалоги

В последнем примере метод showModal() использовался для создания модального диалога. Взаимодействие с пользователем заблокировано внутри модальных диалогов, а внешнее содержимое нельзя щелкнуть, сфокусировать, выбрать, отредактировать или просмотреть с помощью инструментов специальных возможностей. Еще одной особенностью модальных диалогов является их способность появляться поверх всего остального на веб-странице, независимо от z-индекса других элементов.

Также существуют немодальные диалоговые окна, которые можно вызвать с помощью метода show(). В отличие от модальных диалогов, они по-прежнему позволяют взаимодействовать с окружающим содержимым. Примером использования может быть диалоговое окно поиска на странице для редактора документов, где вы по-прежнему хотите разрешить пользователю взаимодействовать с остальной частью документа.

Использование форм

Формы в диалогах можно использовать для запроса информации от пользователя, например, когда требуется адрес доставки или платежные реквизиты.

В отличие от традиционного , где method="get" или "post" указывает, что данные формы отправляются на сервер, использование вместо этого приводит к закрытию диалогового окна и установке свойства returnValue в значение кнопки отправки. Это может избавить вас от написания собственного кода, обеспечивая при этом правильную семантику вашей веб-страницы.

Обратите внимание на использование здесь события close, которое является особенным для .

Пример диалогового окна подтверждения с формой

Стили

Полупрозрачное поле за диалоговым окном, которое вы, возможно, заметили в предыдущих примерах, представляет собой псевдоэлемент ::backdrop. По умолчанию он оформлен таким образом, что покрывает всю область просмотра. Как и само диалоговое окно, вы можете стилизовать фон с помощью CSS. Анимацию также можно использовать, если вы хотите, например, добавить эффект плавного появления.

Обратите внимание, что фон отображается только для модальных диалоговых окон.

Вот пример:

Фон оживает!

Показать пример красивого диалогового окна со стилем и анимацией

Специальные возможности

Для специальных возможностей этот элемент эквивалентен role="dialog" . Кроме того, модальное диалоговое окно будет вести себя аналогично элементу с aria-modal="true" .

Пользователи могут закрывать модальные диалоговые окна с помощью клавиши Escape в браузерах настольных компьютеров. Это вызовет событие отмены, которое вы можете перехватить. Если открыто несколько модальных диалоговых окон, последнее показанное будет закрыто.

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

Поддержка браузера

Бета-версия Safari 15.4 и предварительная версия технологии Safari
Хром 37
Firefox 98

Дальнейшие шаги

В этом посте мы рассмотрели основы и связанные с ним функции. Вот следующие шаги для этого элемента:

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

В рамках реализации мы также усовершенствовали атрибут inert, чтобы добиться взаимодействия между браузерами. В настоящее время он отключен по умолчанию и еще не стандартизирован, но вы можете включить «инертный атрибут» в меню «Экспериментальные функции» из меню «Разработка» в Safari Technology Preview, чтобы протестировать его.

По любым вопросам обращайтесь к @therealntim в Twitter. Чтобы сообщить о любых проблемах, сообщите об ошибке 84635, блокирующей ошибку.

DigitalOcean объединяет усилия с CSS-Tricks! Специальное приветственное предложение: получите бесплатный кредит в размере 100 долларов США.

Это я впервые смотрю на HTML-элемент. Давно об этом знаю, но пока не пробовал. У него есть несколько довольно крутых и привлекательных функций. Я не могу решить за вас, следует ли вам использовать его в работе на своих сайтах, но я думаю, что это становится возможным.

Это не просто семантический элемент, у него есть API и специальный CSS.

Мы вернемся к этому через мгновение, но это примечательно, потому что это делает поддержку браузера важной.

Тем не менее, я бы не стал использовать просто «более семантический»

Давайте займемся поддержкой браузера.

У Chrome это есть (37+), поэтому у Edge это скоро появится.
В Firefox есть стили User-Agent (UA ) (69+), но функциональные возможности скрыты флагом dom.dialog_element.enabled. Даже с флагом похоже, что мы еще не получили материал CSS.
Отсутствует поддержка Safari.

Конечно, лучше использовать функции с лучшей поддержкой, чем эта, но я бы сказал, что это близко, и это может просто пересечь черту, если вы все равно предпочитаете полифиллы.

Перейдем к пикантным вещам.

Диалог либо открыт, либо нет.

Им придан определенный стиль UA.

Для их открытия и закрытия существует JavaScript API.

Скажем, у вас есть ссылка на элемент с именем dialog :

Возможно, вам следует использовать эту более явную команду:

Вот что заставляет фон работать (и мы скоро к этому вернемся). Я не уверен, что понял это, но в спецификации говорится о «стеке ожидающих диалогов», и этот API откроет модальное окно в ожидании этого стека. Вот модальное окно, которое может открывать второе модальное окно с накоплением:

Их также можно закрыть с помощью HTML.

Если вы поместите туда специальную форму, отправка формы закроет модальное окно.

Обратите внимание, что если вы открываете диалоговое окно программно, вы получаете фоновую обложку.

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

Мы получаем это бесплатно с помощью , если вы открываете его с помощью JavaScript. Вы управляете его внешним видом с помощью псевдоэлемента ::backdrop.Вместо черного с низкой непрозрачностью по умолчанию сделаем красный с полосками:

Классный бонус: вы можете использовать фоновый фильтр, чтобы делать такие вещи, как размытие фона.

Это перемещает фокус для вас

Я мало что знаю об этом, но я могу запустить VoiceOver на своем Mac и увидеть, что диалоговое окно становится в фокусе, и когда я нажимаю кнопку, открывающую модальное окно.

Фокус не перехватывается, и я слышал, что это идеально подходит для модальных окон. У нас есть отличная идея для этого с использованием CSS, которую вы могли бы изучить.

Роб Додсон сказал: "На самом деле модальные окна — это битва с боссом в конце веб-доступности". Приятно, что родная версия браузера во многом помогает. Вы даже автоматически получаете функцию закрытия клавиши Escape, и это здорово. Однако снаружи нет щелчка, чтобы закрыть. Возможно, когда-нибудь ожидание отзывов пользователей.

Статья Ire – это полезный ресурс для создания собственных диалогов и множества соображений доступности при их использовании.

Говоря о WAI-ARIA, для создания полностью доступного модального диалогового окна вы можете пока игнорировать элемент диалогового окна […] Я просто хочу сказать прямо сейчас, что элемент диалогового окна и его полифилл не являются подходит для использования в производстве

Не могли бы вы добавить полифилл? Здесь на моем iPad ничего не работает, что в реальном мире было бы неприемлемо.

<р>круто! Мне очень интересно!

Классная штука. Спасибо, что всегда держите меня в курсе крутых новинок.

Когда я использовал его в прошлый раз, я не мог заставить его работать с recaptcha v2 (диалоговое окно появляется в верхней части всплывающей подсказки recaptcha «выберите n автомобилей»).

Возможно, проблема не в v3.

Есть некоторые проблемы с доступностью элемента диалога.

Поддержка ARIA, необходимая для того, чтобы элемент диалога сохранял паритет в удобстве использования с пользователями, не использующими вспомогательные технологии, различается. К сожалению, поддержка включает рассмотрение как браузера , так и вспомогательных технологий. Заметными проблемами являются чрезмерно подробные объявления, не объявленная роль диалога, возврат фокуса на страницу или вид, порожденный модальным окном, и недостаточный полифилл.

Скотт О’Хара написал два хороших подробного описания проблем, которые он обнаружил во время очень тщательного тестирования:

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

Здравствуйте, сэр, я использую диалоговое окно как разделение на раздел для какой-то ссылки, но когда я открываю диалоговое окно, оно перезаписывается в моих веб-данных, как я могу использовать диалоговое окно для разделения на раздел без перезаписи.
Помогите мне
Спасибо

Я так рада, что этот элемент получит больше внимания.

Это кажется немного неудобным, и я не пытался использовать POC для этого, но для «щелкните снаружи, чтобы закрыть», не могли бы вы зарегистрировать событие щелчка в диалоговом окне и использовать обработчик, чтобы проверить, где произошел щелчок? Фон — это псевдоним, поэтому технически он все еще является частью элемента, но не частью его коробки — правильно?

С помощью LambdaTest вы можете протестировать свои веб-сайты в более чем 3000 комбинациях браузеров и ОС на предмет проблем совместимости между браузерами и убедиться, что резервные варианты веб-страниц нормально работают в браузерах, не поддерживающих DIALOG ELEMENT .

БРАУЗЕРНАЯ ПОДДЕРЖКА ЭЛЕМЕНТА ДИАЛОГ

Google Chrome

Браузер Chrome версии 4 и браузер Chrome версии 36 не поддерживаются. Включено в Chrome с помощью флага «экспериментальные функции веб-платформы» в chrome://flags. Браузер Chrome версии 37 – браузер Chrome версии 70 поддерживает свойство элемента Dialog.

Мозилла Фаерфокс

Браузер Mozilla Firefox версии 2 – браузер Mozilla Firefox версии 63 не поддерживает свойство элемента Dialog.

Интернет-обозреватель

От браузера Internet Explorer версии 6 до версии браузера Internet Explorer 11 элемент Dialog не поддерживается.

Сафари

Браузер Safari версии 3.1 – браузер Safari 12 не поддерживает элемент Dialog.

Майкрософт Эдж

Браузер Microsoft Edge версии 12 — браузер Microsoft Edge версии 18 не поддерживает элемент Dialog.

Опера

Браузер Opera от версии 10.1 до версии Opera 23 не поддерживает. Браузер Opera от версии 24 до Opera версии 53 поддерживает элемент Dialog.

Информация получена из

Можно ли использовать

Другие браузеры на выбор

Вы можете выбирать из более чем 3000 браузеров для компьютеров и мобильных устройств, включая Chrome, Safari, Internet Explorer, Edge, Яндекс, Opera и Firefox, что позволит вам гарантировать, что ваши клиенты получат безупречный пиксельный интерфейс на всех размерах экрана, устройствах, операционные системы, браузеры и разрешения.

Попробуйте LambdaTest прямо сейчас!!

Получайте 60 минут интерактивного тестирования каждый месяц БЕСПЛАТНО!! Единственный бесплатный пожизненный инструмент для кросс-браузерного тестирования.

Читайте также: