Дијалози и модали су саставни делови већине веб апликација. Иако њихова ручна израда није сложен задатак, то је задатак који брзо постаје досадан за сваког веб програмера. Уобичајена алтернатива ручној изради је употреба компоненте коју је направио неко други.

Међутим, постоји неколико проблема са овим приступом. Постоји толико много опција да постаје тешко знати коју компоненту би било најбоље користити, и прилагођавање изгледа таквих компоненти понекад може бити једнако заморно као и прављење дијалога ручно. На срећу, постоји још једна алтернатива: ХТМЛ елемент дијалога.

Шта је елемент дијалога?

ХТМЛ елемент дијалога је уграђена ХТМЛ ознака (попут див или спан), која омогућава програмерима да креирају прилагођене дијалоге и модале. Елемент дијалога постоји у Цхроме-у и Опери од 2014. године, али је тек недавно постао подржан од стране свих главних претраживача.

Зашто користити елемент дијалога?

Примарни разлог за коришћење елемента дијалога је погодност. Олакшава прављење дијалога који се могу појавити у линији или као модални, са само једном ХТМЛ ознаком и неколико редова ЈаваСцрипт-а.

instagram viewer

Елемент дијалога уклања потребу за прављењем и отклањањем грешака у прилагођеном дијалогу или увозом туђе компоненте. Такође је веома лако стилизовати помоћу ЦСС-а.

Подршка претраживача за елемент дијалога

Нажалост, подршка претраживача за елемент дијалога би могла бити боља. Подржан је у најновијим верзијама свих главних претраживача од марта 2022. године, уз нека упозорења.

Сваки Фирефок претраживач старији од Фирефок-а 98 ће га подржавати само ако је ручно омогућен у подешавањима претраживача, а било која верзија Сафарија старија од Сафарија 15.4 га уопште не подржава. Потпуни детаљи о подршци претраживача доступни су на Могу ли да користим.

Срећом, то не значи да је елемент дијалога неупотребљив. Гоогле Цхроме тим одржава полифил на коме можете да пронађете Гитхуб за елемент дијалога који пружа подршку за њега чак и на прегледачима где није изворно подржан.

У свом тренутном облику, елемент дијалога може имати проблема са приступачношћу, па би можда било прикладније користити прилагођену компоненту дијалога као што је а11и-дијалог у производним апликацијама.

Како користити елемент дијалога

Да бисте демонстрирали како да користите елемент дијалога, користићете га да направите уобичајену функцију веб локације: модалну потврду за дугме за брисање.

Све што је потребно да се прати је једна ХТМЛ датотека.

1. Подесите ХТМЛ датотеку

Почните тако што ћете креирати поменуту датотеку и назвати је индек.хтмл.

Затим успоставите структуру ХТМЛ датотеке и обезбедите неке основне мета-информације о страници, тако да се правилно приказује на свим уређајима.

Откуцајте следећи код у индек.хтмл:

<!ДОЦТИПЕ хтмл>
<хтмл ланг="ен">
<глава>
<мета цхарсет="УТФ-8">
<мета хттп-екуив="Кс-УА-Цомпатибле" цонтент="ИЕ=ивица">
<мета наме="виевпорт" цонтент="видтх=девице-видтх, инитиал-сцале=1.0">
<наслов>Демо дијалога</title>
</head>
<стил></style>


<тело></body>
<скрипта></script>
</html>

То је све потребно подешавање за овај пројекат.

2. Писање ознаке

Затим напишите ознаку за дугме за брисање, као и елемент дијалога.

Откуцајте следећи код у ознаку тела индек.хтмл:

<див цласс="дугме-контејнер">
<дугме>
Избриши предмет
</button>
</div>
<дијалог>
<див>
 Да ли сте сигурни да желите да избрисатиово предмет?
</div>
<див>
<дугме цласс="Близу">
 да
</button>
<дугме цласс="Близу">
 Не
</button>
</div>
</dialog>

ХТМЛ изнад ће креирати:

  • Дугме за брисање.
  • Елемент дијалога.
  • Два дугмета унутар дијалога.

Ако је индек.хтмл отворен у вашем претраживачу, једини елемент видљив на екрану биће дугме за брисање. Ово не значи да нешто није у реду, елемент дијалога једноставно захтева мало ЈаваСцрипт-а да би постао видљив.

3. Додавање ЈаваСцрипт-а

Сада напишите код који ће отворити дијалог када корисник кликне на дугме за брисање, као и код који ће омогућити затварање дијалога.

Унесите следеће у ознаку скрипте индек.хтмл:

конст модални = документ.куериСелецтор("дијалог")
доцумент.куериСелецтор(".дугме-контејнер дугме").аддЕвентЛистенер("клик", () => {
модални.сховМодал();
});
конст цлосеБтнс = документ.гетЕлементсБиЦлассНаме("цлосе");
за (бтн од цлосеБтнс) {
 бтн.аддЕвентЛистенер("клик", () => {
модални.Близу();
 })
}

Овај код користи методу куериСелецтор да бисте добили референце на дугмад и дијалог. Затим сваком дугмету прилаже слушалац догађаја клика.

Можда сте упознати са слушаоце догађаја у ЈаваСцрипт-у, које можете и сами да користите. Слушалац догађаја повезан са дугметом за брисање позива метод сховМодал() да прикаже дијалог када се кликне на дугме.

Свако дугме унутар модалног има прикачен слушалац догађаја који користи методу цлосе() да сакрије дијалог када се кликне.

Чак и ако у коду не постоји ЈаваСцрипт који позива методу цлосе(), корисници такође могу затворити модал притиском на тастер есцапе на својој тастатури.

Сада када је овај ЈаваСцрипт постављен, ако корисник кликне на дугме за брисање, модал ће се отворити, а кликом на дугме да или не затвориће модал.

Овако треба да изгледа отворени модал:

Једна ствар коју треба приметити је да елемент дијалога већ има неки стил, иако нема ЦСС-а у индек.хтмл. Модал је већ центриран, има ивицу, ширина је ограничена на садржај и има неки подразумевани паддинг.

Корисници не могу да комуницирају (кликну, изаберу) ни са чим у позадини док је модал отворен.

Елемент дијалога се такође може приказати као део тока странице уместо као модални. Да бисте га испробали, промените први слушалац догађаја у ЈаваСцрипт-у на следећи начин:

доцумент.куериСелецтор(".дугме-контејнер дугме").аддЕвентЛистенер("клик", () => { модал.схов(); });

Једина ствар која се променила у овом коду је да код позива метод схов() уместо методе сховМодал(). Сада, када корисник кликне на дугме за брисање ставке, модал би требало да се отвори у линији овако:

4. Додај стил

Затим прилагодите изглед дијалога и његову позадину писањем ЦСС-а.

ЦСС ће смањити ивицу дијалога, ограничити његову максималну ширину, а затим затамнити позадину, као и додати мало стила дугмадима.

Стилизирање самог дијалога је једноставно, али псеудо класа позадине је неопходна за додавање стила који циља на позадину дијалога.

Налепите следећи код у ознаку стила индек.хтмл:

дијалог:: позадина {
 позадина: црна;
непрозирност: 0.5;
}
дугме {
 бордер-радиус: 2пк;
 боја позадине: бела;
 ивица: 1пк пуна црна;
 маргина: 5пк;
 бок-схадов: 1пк 1пк 2пк сива;
}
дијалог {
 мак-видтх: 90вв;
 ивица: 1пк пуна црна;
}

Када је дијалог отворен, сада би требало да изгледа овако:

И изградили сте потпуно функционалан дијалог.

Елемент дијалога је одличан начин за прављење модала

Користећи ХТМЛ елемент дијалога који је недавно добио подршку у свим главним претраживачима, веб програмери сада могу да направе потпуно функционалне, лако прилагодљиви модали и дијалози са једном ХТМЛ ознаком и неколико редова ЈаваСцрипт-а и без потребе да се ослањате на трећу страну решење.

Елемент дијалога има полифил који одржава Гоогле Цхроме тим, што омогућава програмерима да користе дијалог у верзијама прегледача које га не подржавају.