Диалоговые окна (также известные как модальные окна и плавающие слои) являются важной частью взаимодействия с пользователем в веб-проектах. Наиболее распространенными из них являются alert() и Confirm() в js. Однако это диалоговое окно некрасиво и не может быть таким. быть индивидуальным стилем, поэтому в процессе разработки мы обычно создаем колеса в соответствии с собственными потребностями или используем сторонние.
Состав диалогового окнаРаспространенные формы всплывающих окон:
Позиция: верхний левый угол экрана, верхний правый угол, нижний левый угол, нижний правый угол, вертикальный центр и т. д.
Размер: фиксированная ширина и фиксированная высота, фиксированная ширина и фиксированная высота, переменная ширина и фиксированная высота и т. д.
Разрабатываемая диалоговая форма представляет собой случай случайного сочетания положения и размера.
Однако есть одна ситуация (вертикальное центрирование с переменной шириной и высотой), которую нелегко реализовать (для этого можно использовать display:table или CSS3-перевод или flex). Подробности см. в разделе «Горизонтальное и вертикальное центрирование». .
Приведенное выше диалоговое окно содержит контейнер для содержимого, а под диалоговым окном также имеется слой маски (маска). Слой маски представляет собой разделительный слой между диалоговым окном и телом страницы, образующийся после того, как пользователь запускает всплывающее окно. Его существование. Оно может дать пользователям более очевидный эффект визуального различия и в то же время избежать других ненужных основных операций страницы после того, как пользователи запускают диалоговое окно, тем самым обеспечивая лучший пользовательский опыт.
Есть проблемаНесмотря на то, что у нас есть множество диалоговых колес, мы сталкиваемся с различными проблемами.
Итак, есть ли простой способ создать диалоговое окно? Конечно, мы можем использовать элемент диалога HTML5.
HTML5(диалоговое окно)
<диалог открыт> <h2>Привет, мир!</h2></dialog>
Это очень просто. Мы можем использовать приведенный выше код, чтобы создать всплывающее диалоговое окно с содержимым «Привет, мир».
Также легко управлять отображением/скрытием диалогового окна. Добавьте атрибут открытия, чтобы отобразить его, и удалите его, чтобы скрыть. Конечно, мы также можем управлять отображением и скрытием диалога через интерфейс DOM (show(), close()).
Для слоя маски под диалоговым окном мы можем использовать псевдоэлемент ::backgrop, а для его активации нам нужно использовать DOM API showModal(). Особенностью ::backgrop является то, что он находится под диалогом. , в любом z-индексе выше.
Использование showModal() позволяет отображать не только слой маски, но и контейнер диалога, поэтому при использовании ::backdrop вы можете использовать showModal() вместо API show(), если вы нажмете клавишу ESC на клавиатуре; Всплывающий слой будет закрыт. Конечно, вы можете использовать DOM API close().
Мы можем сделать слой ::backdrop полупрозрачным, код следующий:
диалог::backdrop {background-color: rgba(0, 0, 0, 0.75);}Помимо наших обычных всплывающих слоев с подсказками, существует также всплывающий слой с более часто используемой формой.
Всплывающий слой с формойМожем ли мы использовать элемент диалога HTML5 в сочетании с элементом формы для создания этих всплывающих слоев?
Ответ: Да
Как мы можем тесно объединить элемент формы и элемент диалога?
Ответ: Нам нужно только добавить атрибут Method=dialog к элементу диалога, чтобы значение атрибута элемента кнопки можно было передать элементу диалога.
<dialog> <form Method=dialog> <p>Подтвердить или отменить</p> <button type=submit value=yes>Confirm</button> <button type=submit value=no>Cancel</button> </form >/dialog><script> var диалог = document.querySelector('dialog') диалог.showModal() диалог.addEventListener('закрыть', функция(событие) { console.log(dialog.returnValue) })</script>демо
Совместимость с браузеромХотя это относительно простой в использовании HTML5, все еще существуют проблемы с совместимостью. Chrome и Opera поддерживают его лучше. Это экспериментальная функция в Firefox, но она не поддерживается IE, Edge и Safari. ios, а также поддерживается Android, недостаточно хорош и поддерживается только Android 6 и более поздних версий. Для получения подробной информации, пожалуйста, обратитесь к caniuse
Итак, могут ли старые версии браузеров поддерживать диалог HTML5? Прежде всего, мы думаем о том, существует ли полифилл, поддерживающий диалог, точно так же, как Babel-polyfill, который поддерживает новые возможности es6. Действительно, существует такой проект с открытым исходным кодом a11y-dialog, который предоставляет разные версии vue и. реагировать соответственно.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.