Ինչպես հեշտությամբ կառուցել մոդալներ HTML երկխոսության տարրի միջոցով

Մոդալների այս ուղեցույցով ծանոթացեք HTML երկխոսության տարրին:

Երկխոսություններն ու մոդալները վեբ հավելվածների մեծ մասի անբաժանելի մասն են: Թեև դրանք ձեռքով կառուցելը բարդ խնդիր չէ, այն արագորեն հոգնեցուցիչ է դառնում ցանկացած վեբ մշակողի համար: Դրանք ձեռքով կառուցելու սովորական այլընտրանքն ուրիշի կողմից ստեղծված բաղադրիչի օգտագործումն է:

Այնուամենայնիվ, այս մոտեցման հետ կապված մի քանի խնդիր կա: Այնքան շատ տարբերակներ կան, դժվար է դառնում իմանալ, թե որ բաղադրիչն է ավելի լավ օգտագործել, և նման բաղադրիչների արտաքին տեսքը հարմարեցնելը երբեմն կարող է նույնքան հոգնեցուցիչ լինել, որքան ձեռքով երկխոսություն կառուցելը: Բարեբախտաբար, կա ևս մեկ այլընտրանք՝ HTML երկխոսության տարրը:

Ի՞նչ է երկխոսության տարրը:

HTML երկխոսության տարրը ներկառուցված HTML թեգ է (ինչպես div կամ span), որը թույլ է տալիս մշակողներին ստեղծել անհատական երկխոսություններ և մոդալներ: Երկխոսության տարրը գործում է Chrome-ում և Opera-ում 2014 թվականից, բայց միայն վերջերս է աջակցվում բոլոր հիմնական բրաուզերների կողմից:

Ինչու՞ օգտագործել երկխոսության տարրը:

Երկխոսության տարրը օգտագործելու հիմնական պատճառը հարմարավետությունն է: Այն հեշտացնում է երկխոսությունների կառուցումը, որոնք կարող են կամ ներդաշնակորեն հայտնվել կամ ցուցադրվել որպես մոդալներ՝ ոչ ավելի, քան մեկ HTML թեգ և JavaScript-ի մի քանի տող:

Երկխոսության տարրը վերացնում է հատուկ երկխոսություն ստեղծելու և վրիպազերծելու անհրաժեշտությունը կամ ներմուծել ուրիշի բաղադրիչը: Այն նաև շատ հեշտ է ոճավորել CSS-ով։

Բրաուզերի աջակցություն երկխոսության տարրի համար

Ցավոք, երկխոսության տարրի բրաուզերի աջակցությունը կարող է ավելի լավ լինել: Այն աջակցվում է բոլոր հիմնական բրաուզերների վերջին տարբերակներում 2022 թվականի մարտի դրությամբ՝ որոշ նախազգուշացումներով:

Firefox 98-ից հին ցանկացած Firefox բրաուզեր այն կաջակցի միայն այն դեպքում, եթե այն ձեռքով միացված է բրաուզերի կարգավորումներում, իսկ Safari 15.4-ից ավելի վաղ Safari տարբերակն ընդհանրապես չի աջակցում: Բրաուզերի աջակցության ամբողջական մանրամասները հասանելի են caniuse-ում:

Բարեբախտաբար, սա չի նշանակում, որ երկխոսության տարրն անօգտագործելի է: Google Chrome-ի թիմը պահպանում է պոլիֆիլմ, որը կարող եք գտնել Github-ում երկխոսության տարրի համար, որն ապահովում է դրա աջակցությունը նույնիսկ այն բրաուզերներում, որտեղ այն չի աջակցվում բնիկ:

Իր ներկայիս ձևով երկխոսության տարրը կարող է ունենալ հասանելիության խնդիրներ, ուստի ավելի հարմար կլինի օգտագործել հատուկ երկխոսության բաղադրիչ, ինչպիսին է a11y-dialog-ը արտադրական հավելվածներում:

Ինչպես օգտագործել երկխոսության տարրը

Ցույց տալու համար, թե ինչպես օգտագործել երկխոսության տարրը, դուք կօգտագործեք այն՝ ստեղծելու ընդհանուր կայքի հատկանիշ՝ ջնջման կոճակի հաստատման մոդալ:

Այն ամենը, ինչ պահանջվում է հետևել, մեկ HTML ֆայլ է:

1. Ստեղծեք HTML ֆայլը

Սկսեք ստեղծելով նշված ֆայլը և անվանելով այն index.html:

Հաջորդը, հաստատեք HTML ֆայլի կառուցվածքը և տրամադրեք էջի մասին որոշ հիմնական մետա-տեղեկատվություն, որպեսզի այն պատշաճ կերպով ներկայացվի բոլոր սարքերում:

Մուտքագրեք հետևյալ կոդը index.html-ում.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Dialog demo</title>
</head>
 
<style></style>
 
<body></body>
 
<script></script>
</html>

Դա այն ամբողջ կարգավորումն է, որն անհրաժեշտ է այս նախագծի համար:

2. Նշանակումը գրելը

Հաջորդը գրեք ջնջման կոճակի նշումը, ինչպես նաև երկխոսության տարրը:

Մուտքագրեք հետևյալ կոդը index.html-ի մարմնի պիտակում.

<div class="button-container">
 <button>
   Delete item
 </button> 
</div>
<dialog>
 <div>
     Are you sure you want to delete this item?
 </div> 
 <div>
   <button class="close">
     Yes
   </button>
   
   <button class="close">
     No
   </button>
 </div>
</dialog>

Վերևի HTML-ը կստեղծի.

Ջնջման կոճակ:
Երկխոսության տարր.
Երկու կոճակ երկխոսության ներսում:

Եթե index.html-ը բաց է ձեր դիտարկիչում, էկրանին տեսանելի միակ տարրը կլինի ջնջել կոճակը: Սա չի նշանակում, որ սխալ բան կա, երկխոսության տարրը պարզապես պահանջում է մի քիչ JavaScript, որպեսզի տեսանելի դառնա:

3. JavaScript-ի ավելացում

Այժմ գրեք կոդը, որը կբացի երկխոսությունը, երբ օգտատերը սեղմի ջնջել կոճակը, ինչպես նաև ծածկագիրը, որը թույլ կտա երկխոսությունը փակել:

index.html-ի script tag-ում մուտքագրեք հետևյալը.

const modal = document.querySelector("dialog")
document.querySelector(".button-container button").addEventListener("click", () => {
 modal.showModal();
});
const closeBtns = document.getElementsByClassName("close");
for (btn of closeBtns) {
 btn.addEventListener("click", () => {
   modal.close();
 })
}

Այս կոդը օգտագործում է querySelector մեթոդը՝ կոճակներին և երկխոսության հղումներ ստանալու համար: Այն այնուհետև յուրաքանչյուր կոճակին կցում է իրադարձության ունկնդիր սեղմիչ:

Դուք կարող եք ծանոթ լինել JavaScript-ի իրադարձությունների ունկնդիրներին, որոնք կարող եք օգտագործել ինքներդ: Ջնջել կոճակին կցված իրադարձության ունկնդիրը կանչում է showModal() մեթոդը՝ կոճակը սեղմելիս երկխոսությունը ցուցադրելու համար։

Մոդալի ներսում յուրաքանչյուր կոճակ ունի իրադարձության ունկնդիր, որն օգտագործում է close() մեթոդը՝ թաքցնելու երկխոսությունը, երբ դրանք սեղմվում են:

Նույնիսկ եթե կոդի մեջ չկա JavaScript, որը կանչում է close() մեթոդը, օգտվողները կարող են նաև փակել մոդալը՝ սեղմելով իրենց ստեղնաշարի escape ստեղնը:

Այժմ, երբ այս JavaScript-ը տեղադրված է, եթե օգտվողը սեղմի ջնջել կոճակը, մոդալը կբացվի, և սեղմելով այո կամ ոչ կոճակը, մոդալը կփակի:

Ահա թե ինչպիսին պետք է լինի բացված մոդալը.

Ուշագրավ մի բան այն է, որ երկխոսության տարրն արդեն ունի որոշակի ոճավորում, թեև index.html-ում CSS չկա: Մոդալն արդեն կենտրոնացած է, այն ունի եզրագիծ, լայնությունը սահմանափակված է բովանդակությամբ և ունի որոշակի լռելյայն լիցք:

Օգտատերերը չեն կարող փոխազդել (սեղմել, ընտրել) հետին պլանում գտնվող որևէ բանի հետ, մինչ մոդալը բաց է:

Երկխոսության տարրը կարող է նաև դրսևորվել որպես էջի հոսքի մաս, այլ ոչ թե որպես մոդալ: Փորձելու համար փոխեք առաջին իրադարձության ունկնդիրը JavaScript-ում այսպես.

document.querySelector(".button-container button").addEventListener("click", () => { modal.show(); });

Միակ բանը, որ փոխվել է այս կոդում, այն է, որ կոդը կանչում է show() մեթոդը՝ showModal() մեթոդի փոխարեն։ Այժմ, երբ օգտատերը սեղմում է ջնջել տարրի կոճակը, մոդալը պետք է ներդիրում բացվի այսպես.

4. Ավելացնել Styling

Հաջորդը, հարմարեցրեք երկխոսության տեսքը և դրա ֆոնը՝ գրելով CSS:

CSS-ը կնվազեցնի երկխոսության եզրագիծը, կսահմանափակի դրա առավելագույն լայնությունը, այնուհետև կմթնեցնի ֆոնը, ինչպես նաև կավելացնի մի փոքր ոճավորում կոճակներին:

Երկխոսության ձևավորումն ինքնին պարզ է, բայց հետնաշերտի կեղծ դասը անհրաժեշտ է ոճավորում ավելացնելու համար, որն ուղղված է երկխոսության ֆոնին:

Տեղադրեք հետևյալ կոդը index.html-ի ոճի թեգում.

dialog::backdrop {
  background: black;
  opacity: 0.5;
}
button {
  border-radius: 2px;
  background-color: white;
  border: 1px solid black;
  margin: 5px;
  box-shadow: 1px 1px 2px grey;
}
dialog {
  max-width: 90vw;
  border: 1px solid black;
}

Երբ երկխոսությունը բաց է, այն այժմ պետք է նման լինի.

Եվ դուք ստեղծել եք լիովին ֆունկցիոնալ երկխոսություն:

Երկխոսության տարրը մոդալներ կառուցելու հիանալի միջոց է

Օգտագործելով HTML երկխոսության տարրը, որը վերջերս աջակցություն է ստացել բոլոր հիմնական բրաուզերներում, վեբ մշակողները այժմ կարող են ստեղծել լիովին ֆունկցիոնալ, հեշտությամբ կարգավորելի մոդալներ և երկխոսություններ մեկ HTML թեգով և JavaScript-ի մի քանի տողով և առանց երրորդ կողմի լուծումների վրա հիմնվելու կարիքի:

Երկխոսության տարրն ունի բազմալցում, որը պահպանվում է Google Chrome թիմի կողմից, որը թույլ է տալիս ծրագրավորողներին օգտագործել երկխոսություն բրաուզերի այն տարբերակներում, որոնք չեն աջակցում այն: