Расширенные возможности HTML 5 и css упростили создание диалоговых окон. Теперь вам необходимо будет лишь задействовать элемент <dialog>. Сегодня его поддержка ограничена браузерами Safari 6.0 и Хром Canary, но в дальнейшем обязательно станут доступны другие обозреватели. Чтобы активировать <dialog>, просто перейдите по секретному адресу chrome://flags  и активируйте «Enable Platform features».

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

  • Show (). Используется для открытия диалога.

  • showModal (). Пользователь получает доступ только к открытому «модальному окну».

  • Close (). Метод просто закрывает диалог.

Так называемый HTMLDialogElement может включать в себя два атрибута:

  • Open: может принимать два значения: true (пользователь увидит диалог) или false (скрытый).

  • returnValue (возвращает параметры, переданные в close ().

Кроме этого, <dialog> поддерживает фокус на инпутах в диалоге (атрибут autofocus), cancel event (срабатывает, если окно закрылось кнопкой Esc), и др.

Ниже мы приводим конкретный пример использования <dialog>.

1

2

3

4

5

<dialog id="Dialog">

<p>Спасибо Hevix'у за отличный урок ;)</p>

<button id="closeDialog">Закрыть</button>

</dialog>

<button id="showDialog">Открыть окно</button>

 

Вы сами видите, насколько прост и понятен этот код. Содержание всплывающего окна всегда нужно заключать внутрь тега <dialog>. При показе содержимого элемента <dialog> не обойтись без методов .show () и .close (), которые упоминались ранее.

1

2

3

4

5

6

7

8

9

(function() { 

    var dialog = document.getElementById('Dialog');

document.getElementById('showDialog').onclick = function() { 

dialog.show(); 

}; 

document.getElementById('closeDialog').onclick = function() { 

dialog.close(); 

};

})();

 

Погружаться в стилизацию диалоговых окон с головой мы точно не будем – здесь и так все предельно просто. Зададим лишь общий стиль для будущего макета:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

dialog {

top: 28%;

width: 400px; 

border: 1px solid rgba(0, 0, 0, 0.3);

border-radius: 15px;

box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);

border-top: 5px solid #eb9816;

}

button{

display: inline-block;

border-radius: 3px;

border: none;

font-size: 0.9rem;

padding: 0.4rem 0.8em;

background: #eb9816;

border-bottom: 1px solid #f1b75c;

color: white;

font-weight: bold;

margin: 0 0.25rem;

text-align: center;

}

button:hover, button:focus {

opacity: 0.92;

cursor: pointer;

}

popup1

Бывает и такое, что вам просто необходимо сфокусировать внимание посетителей на всплывающем окне. Тогда лучше использовать модальные окна. В HTML ничего не меняем, в JS файле находим .show() и меняем его на .showModal().

1

2

3

4

5

6

7

8

9

(function() { 

    var dialog = document.getElementById('Dialog');

document.getElementById('showDialog').onclick = function() { 

dialog. showModal();

}; 

document.getElementById('closeDialog').onclick = function() { 

dialog.close(); 

};

})();

 

В принципе, можно пойти дальше и добавить модальному окну задний фон. Для этого воспользуйтесь псевдоэлементом :backdrop.

1

2

3

4

5

6

7

8

dialog::backdrop{

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

background-color: rgba(0, 0, 0, 0.7);

}

popup2

Из-за малой распространенности использовать элемент <dialog> пока рановато. Но с другой стороны, вам не нужно будет каждый раз подключать дополнительные плагины и грузить ими свой сервер. Просто нужно дождаться, когда его поддержкой обзаведутся другие браузеры.

Добавить комментарий


Яндекс.Метрика