Элемент <dialog> задает диалоговое окно, в котором можно выводить сообщение или форму, например, для входа на сайт. Диалоговое окно отображается со следующим предустановленным стилем.
<dialog> տարրը սահմանում է երկխոսության տուփ, որտեղ դուք կարող եք ցուցադրել հաղորդագրություն կամ ձև, օրինակ՝ կայք մուտք գործելու համար: Երկխոսության տուփը ցուցադրվում է հետևյալ նախադրված ոճով.
Таким образом диалоговое окно отображается с белым фоном, чёрной рамкой и по центру горизонтальной оси. Ширина совпадает с шириной родительского контейнера.
Для отображения и сокрытия диалогового окна применяются, соответственно, методы show() и hide(), как показано в примере ниже. Кроме того, диалог можно превратить в модальное окно, используя вместо show() метод showModal. В этом случае остальные элементы на странице блокируются — текст нельзя выделить, а кнопки нажать до тех пор, пока диалоговое окно не будет закрыто. Также модальное окно можно закрыть клавишей Esc.
Այսպիսով, երկխոսության տուփը ցուցադրվում է սպիտակ ֆոնով, սև եզրագծով և կենտրոնացած է հորիզոնական առանցքի վրա: Լայնությունը նույնն է, ինչ մայր կոնտեյների լայնությունը:
Երկխոսության տուփը ցուցադրելու և թաքցնելու համար օգտագործեք համապատասխանաբար show() և hide() մեթոդները, ինչպես ցույց է տրված ստորև բերված օրինակում: Դուք կարող եք նաև երկխոսությունը վերածել մոդալ պատուհանի, օգտագործելով showModal մեթոդը՝ show()-ի փոխարեն: Այս դեպքում էջի մնացած տարրերն արգելափակված են՝ տեքստը չի կարող ընտրվել, և կոճակները չեն կարող սեղմվել, քանի դեռ երկխոսության տուփը չի փակվել: Դուք կարող եք նաև փակել մոդալ պատուհանը Esc ստեղնով:
See the Pen dialog by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.
See the Pen dialog + js by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.
⇓Результат данного примера показан на рисунке⇓
⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓
| Browser | IE | Edge | Chrome | Firefox | Safari | Opera |
|---|---|---|---|---|---|---|
| Version | 11+ | 79+ | 37+ | 98+ | Yes | 24+ |