Используйте собственные элементы диалога HTML5 и легко создавайте модальные компоненты.

В черновик HTML 5.2 добавлен новый элемент диалога. Но это экспериментальный метод.

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

Ниже приведена html-структура модального окна начальной загрузки:

 <!-- Кнопка запускает модальное окно--><button class=btn btn-primary btn-lg data-toggle=modal data-target=#myModal> Начать демонстрацию модального окна</button><!-- Модальное окно (Модальное) ) --><div class=модальное затухание id=myModal tabindex=-1 role=dialog aria-labelledby=myModalLabel aria-hidden=true> <div class=modal-dialog> <div class=modal-content> <div class=modal-header> <button type=button class=close data-dismiss=modal aria-hidden=true> &times; =modal-title id=myModalLabel> Модальный заголовок</h4> </div> <div class=modal-body> Добавьте сюда текст</div> <div class=modal-footer> <button type=button class=btn btn-default data-dismiss=modal>Закрыть</button> <button type=button class=btn btn-primary> Отправить изменения</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --></div>

Ниже приведена HTML-структура собственного модального окна:

 <!-- Кнопка запускает модальное окно--><button type=button class=btn>Показать модальное окно</button><!-- Модальное окно--><открытие диалогового окна> Собственное модальное окно HTML5</dialog>

Мы видели простейшую разметку элемента диалога, и вы, возможно, заметили, что open — это атрибут в диалоговом окне выше. Добавление этого атрибута к элементу приведет к появлению диалогового окна, в противном случае оно будет удалено. Диалог также будет расположен абсолютно на странице.

На рисунке выше показан базовый стиль модального окна.

Откройте браузер, и вы увидите, что его основной стиль выглядит следующим образом:

 диалог {дисплей: блок; позиция: абсолютная; слева: 0 пикселей; ширина: -webkit-fit-content; цвет: черный; граница: начальная; стиль границы: сплошной; цвет границы: начальный; заполнение: фон: белый;}

Элемент диалога также представляет новый селектор псевдокласса::backdrop. Стиль ::backdrop по умолчанию, просматриваемый через браузер, выглядит следующим образом:

 диалог:: фон {позиция: исправлено; вверху: 0 пикселей; внизу: 0 пикселей; слева: 0 пикселей; фон: rgba (0, 0, 0, 0.1);

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

Например:

 диалог {margin-top: 200px; ширина: 250 пикселей; text-align: center; border-radius: 4px; border: none; box-shadow: 0 0 15px светло-серый;} :backdrop {background: rgba(black, .5);}

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

Ниже показано базовое диалоговое окно, в котором ничего визуально не отображается, поскольку не установлен атрибут open. Вам нужно использовать JavaScript API, чтобы показать/скрыть его:

 <dialog>Это диалоговое окно! </диалог>

API-интерфейсы .show() и .close() элемента диалога предназначены для отображения и закрытия диалогового окна соответственно. Используя эти два API-интерфейса в элементе DOM, вы можете отображать и закрывать диалоговое окно.

Например:

 <!-- HTML --><dialog> <p>Это диалоговое окно! </p> <button id=close>Закрыть диалоговое окно</button></dialog><button id=show>Показать диалоговое окно</button> <!-- script --> <script> var диалог = document. querySelector(диалог); document.querySelector(#show).onclick = function() {dialog.show() }; };</скрипт>

Вы можете передать параметр в диалог.закрытие(). Прослушивая событие закрытия элемента диалога, свойство диалога.returnValue вернет заданное значение.

нравиться:

 <!--HTML--><dialog> <p>Это диалоговое окно! </p> <p><input type=text id=return_value value= Placeholder=Пожалуйста, введите содержимое/></p> <button id=close>Закрыть диалоговое окно</button></dialog><button id=show >Показать диалоговое окно</button><!--script--><script> var диалог = document.querySelector(dialog); document.querySelector(#show).onclick = function(){ диалог.showModal(); }; document.querySelector(# close).onclick = function() { var val = document.querySelector(#return_value).value; Dialog.close(val }); Событие закрытия элемента диалог.addEventListener(close, function(){ alert(this.returnValue); });</script>

Еще один API для отображения диалоговых окон — .showModal().

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

После закрытия диалогового окна close запускает событие. Кроме того, пользователь может закрыть модальное диалоговое окно, введя клавишу Escape. Это вызовет событие отмены, которое вы можете отменить с помощью event.preventDefault().

Вы можете использовать form[method=dialog] для интеграции формы с элементом <dialog>. После отправки формы она закрывает диалоговое окно и устанавливает в диалоговом окне.returnValue значение использованной кнопки отправки.

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

Например:

 <!--HTML--><dialog id =dialog> <form Method =dialog> <p>Вы согласны с Условиями использования? </p> <p><textarea class =form-control отключен>Условия требуют...</textarea></p> <тип кнопки =отправить значение =Да>Да</button> <тип кнопки =отправить значение = Нет автофокуса>Нет</button> </form></dialog><button id=show>Показать диалог формы</button><!--script--><script> var диалог = document.querySelector(dialog) ; document.querySelector(#show).onclick = function(){ Dialog.showModal() } //Прослушиваем событие закрытия элемента диалога.addEventListener(close, function(e){ if(this.returnValue =; == Да ){ alert(this.returnValue) //сделаем что-нибудь... }else{ alert(this.returnValue) //сделаем что-нибудь... });</script>

Среди настольных браузеров только Google Chrome поддерживает полную функциональность диалога (на момент написания этой статьи в блоге). Для достижения кросс-браузерной совместимости используйте диалог-полифилл.

<iframe src=//caniuse.com/dialog/embed прокрутка=noallowtransparency=trueallowfullscreen=trueframeborder=0></iframe>

Справочная статья: Демонстрация элемента диалогового окна

библиотека функций обычноjs: https://github.com/JofunLiang/usuallyjs

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.