HTML dialog: native modal oyna va uni JavaScript'siz ochish-yopish

Qisqacha: dialog — brauzerning tayyor oyna elementi. Modal rejimda u sahifaning qolgan qismini to'sadi, fokusni o'z ichiga oladi, Esc bilan yopiladi va yopilgach fokusni tugmaga qaytaradi. Bularning hammasini brauzer o'zi qiladi. 2026-yilda oynani JavaScript'siz, command="show-modal" li tugma bilan ochish mumkin. Yopish uchun esa ichidagi method="dialog" li forma yetarli.

Bu darsda

• Modal va non-modal oyna farqini tushuntira olasiz.
• dialog ni open atributi bilan va tugma orqali modal qilib ochasiz.
• form method="dialog" va formmethod="dialog" bilan oynani serverga hech narsa yubormasdan yopasiz.
• Modal oyna tekin beradigan imkoniyatlarni sanab bera olasiz: top layer, orqa fon, fokus, Esc.
• closedby atributi va uning Baseline holatini bilasiz.

Oldin bilishingiz kerak: details va summary, Tugmalar va yuborish, Maydon holatlari va yashirin maydonlar.

1. Nega bu kerak?

O'tgan darsda details bilan menyuni ixcham qildik. Endi «Bahor» saytidagi "Mening bronlarim" sahifasiga o'tamiz. Unda har bron yonida "Bronni bekor qilish" tugmasi bor.

Muammo: mehmon tugmani tasodifan bosib yuborsa, bron darhol o'chadi. Yaxshi sayt avval so'raydi: "Bronni bekor qilasizmi?" — va ikki tugma: "Ha" va "Yo'q". Shunday so'rovchi oynani tasdiq oynasi deymiz.

Ilgari bunday oyna div va JavaScript bilan yasalardi. Va deyarli har safar nimadir unutilardi:

• oyna ochiq turganda orqadagi tugmalar ham bosilaverardi;
• Tab bosilsa, fokus oynadan chiqib, orqadagi sahifaga ketib qolardi;
• Esc ishlamasdi;
• ekran o'quvchi oyna ochilganini bilmasdi;
• oyna boshqa elementlarning ostida qolib ketardi.

dialog elementi bularning hammasini brauzer darajasida hal qiladi.

2. Modal va non-modal

Dialog oyna (dialog) — sahifa ustida chiqadigan va foydalanuvchi bilan qisqa "suhbat" qiladigan blok: savol beradi, xabar ko'rsatadi yoki kichik forma so'raydi.

Ikki turi bor:

• Modal oyna — javob bermaguningizcha sahifaning qolgan qismi bilan ishlab bo'lmaydi. Bankomatni eslang: "Chek chiqarilsinmi?" deb so'raganda, "Ha" yoki "Yo'q" ni bosmaguningizcha boshqa hech narsa qila olmaysiz.
• Non-modal oyna — sahifa ustida turadi, lekin orqadagi sahifa ishlayveradi. Masalan, burchakdagi "Yordam kerakmi?" oynasi: u ochiq turganda ham menyuni o'qiyverasiz.

Tasdiq oynasi uchun modal kerak: mehmon avval javob berishi shart.

Bo'sh joyni to'ldiring: javob bermaguncha orqadagi sahifani to'sib turadigan oyna qanday ataladi?

3. Birinchi dialog: open atributi

3.1 Yopiq oyna

<dialog id="bekor-oyna">
  <p>Bronni bekor qilasizmi?</p>
</dialog>

Bu kodni sahifaga qo'ysangiz, ekranda hech narsa ko'rinmaydi. dialog sukut bo'yicha yopiq — xuddi details ning ichki qismi kabi. Uni ochish kerak.

3.2 open — non-modal ochish

details dagi kabi open boolean atributi bor:

<dialog open>
  <p>Bron qabul qilindi! Sizni 18:00 da kutamiz.</p>
</dialog>

Endi oyna ko'rinadi. Lekin diqqat: open atributi oynani non-modal ochadi. Orqadagi sahifa ishlayveradi, Esc yopmaydi, orqa fon qoraymaydi. Brauzer uni oddiy blokdek sahifa ichida ko'rsatadi.

open ni HTML'da yozish kam uchraydi. Odatda oyna foydalanuvchi harakati bilan ochiladi: tugma bosilganda. Buning uchun keyingi bo'lim.

Tekshirib ko'ring: Doniyor tasdiq oynasiga open yozdi va "endi modal bo'ldi" deb o'yladi. Qaysi uch belgidan uning xato ekanini sezasiz?

4. Modal ochish

4.1 Tugma bilan, JavaScript'siz

2025-yil oxiridan hamma asosiy brauzerlarda tugmaga "shu oynani modal qilib och" deb aytish mumkin:

<button type="button" commandfor="bekor-oyna"
        command="show-modal">
  Bronni bekor qilish
</button>

<dialog id="bekor-oyna">
  <p>Bronni bekor qilasizmi?</p>
</dialog>

Ikki yangi atribut:

• commandfor="bekor-oyna" — qaysi elementni boshqarish: oynaning id si. Xuddi label dagi for kabi (label darsi).
• command="show-modal" — nima qilish: "modal qilib ko'rsat".

Bu ikki atribut invoker commands ("chaqiruvchi buyruqlar") deb ataladigan yangi imkoniyat. Ular Chrome va Edge 135, Firefox 144 va Safari 26.2 dan beri ishlaydi. To'liq tafsilotini, boshqa buyruqlarni va eski brauzerlar uchun zaxirani Invoker commands darsida ko'ramiz. Hozircha shu ikki atribut yetarli.

type="button" ni unutmang. Tugma forma ichida bo'lsa, type siz u formani yuboradi — Tugmalar va yuborish darsidagi tuzoq.

4.2 JavaScript bilan (oldindan tanishuv)

2025-yilgacha modal oyna faqat JavaScript bilan ochilardi. Eski kodlarda aynan shuni ko'rasiz:

const oyna = document.querySelector("#bekor-oyna");
oyna.showModal(); // modal qilib ochadi
oyna.close();     // yopadi

Hozir bu kodni tushunish shart emas. showModal() — "modal qilib ko'rsat" degan buyruq, command="show-modal" ham aynan uni bajaradi. JavaScript'ni JavaScript nima darsidan boshlaymiz, dialog ning JavaScript tomonini esa dialog va Popover API JS'dan darsida to'liq ko'ramiz.

5. Modal oyna tekin beradigan narsalar

Tugmani bosing — oyna ochiladi. Endi brauzer sizning o'rningizga oltita ish qiladi.

5.1 Top layer: hamma narsaning ustida

Top layer (eng ustki qatlam) — sahifadagi hamma elementlar ustida turadigan alohida qavat. Modal oyna aynan shu qavatga chiqadi. Sahifada nima bo'lmasin — rasm, menyu, boshqa bloklar — oyna ularning ostida qolib ketmaydi.

Hayotdan o'xshatish: stol ustidagi qog'ozlar. Qaysi biri ustida turishini tartib belgilaydi. Top layer esa stol ustiga qo'yilgan shisha: har qanday qog'oz uning ostida.

5.2 Orqa fon

Modal oyna ortida brauzer yarim shaffof qatlam chizadi. U orqadagi sahifani biroz qoraytiradi va "hozir faqat oyna muhim" deb ko'rsatadi. Bu qatlam CSS'da ::backdrop deb ataladi. Uni bo'yash va xiralashtirish — Top layer: dialog va popover'ni stillash darsida.

5.3 Orqadagi sahifa "uxlaydi"

Modal ochiq turganda orqadagi sahifa inert (harakatsiz) bo'ladi. Uni bosib ham, Tab bilan unga o'tib ham, ekran o'quvchida o'qib ham bo'lmaydi. inert atributini Fokus va tahrir atributlari darsida alohida ko'ramiz.

5.4 Fokus oynaga o'tadi

Oyna ochilishi bilan fokus uning ichiga tushadi. Qaysi elementga?

1. Oyna ichida autofocus li element bo'lsa — o'shanga.
2. Aks holda — oyna ichidagi birinchi fokus oladigan elementga (tugma, maydon).

Maydon holatlari darsida "autofocus ochilgan oyna ichida foydali" degan edik — mana o'sha joy. Tasdiq oynasida autofocus ni xavfsiz tugmaga qo'ying: "Yo'q, qoldirish". Mehmon shoshib Enter bossa, bron o'chmaydi.

5.5 Esc yopadi

Klaviaturada Esc, Android telefonda esa "orqaga" tugmasi yoki imo-ishorasi modal oynani yopadi. Brauzer bularni yopish so'rovi (close request) deb ataydi.

5.6 Fokus qaytib keladi

Oyna yopilgach, fokus uni ochgan tugmaga qaytadi. Klaviatura bilan ishlayotgan mehmon sahifaning boshiga "uloqtirilmaydi" — to'xtagan joyidan davom etadi.

Ekran o'quvchi esa oyna ochilganda "dialog" deb e'lon qiladi va uning ichini o'qiydi.

Oynaning holatlari va ular orasidagi yo'llar:

flowchart TD
  Y(["Yopiq oyna: ko'rinmaydi"])
  M["Modal oyna: sahifa to'silgan, fokus oyna ichida"]
  N["Non-modal oyna: sahifa ochiq"]
  Y -- "command=show-modal" --> M
  M -- "Esc, method=dialog, command=close" --> Y
  Y -- "open atributi" --> N
  N -- "method=dialog, command=close" --> Y

Sxemaga qarang: Esc faqat modal oynadan chiqadigan yo'lda bor. Non-modal oynani faqat oynaning o'z tugmalari yopadi.

Tekshirib ko'ring: Modal oyna ochiq. Mehmon Tab ni 10 marta bosdi. Fokus orqadagi "Menyu" havolasiga yetib boradimi?

6. Oynani yopish

6.1 form method="dialog"

Eng qadimiy va eng ishonchli usul — oyna ichidagi forma. Forma qanday ishlaydi darsida method ning uchinchi qiymati dialog borligini aytgan edik. Mana u:

<dialog id="yordam-oyna">
  <p>Savol bo'lsa, qo'ng'iroq qiling: +998 90 000 00 00.</p>
  <form method="dialog">
    <button type="submit">Tushunarli</button>
  </form>
</dialog>

method="dialog" li forma yuborilganda:

• oyna yopiladi;
• serverga hech narsa yuborilmaydi, sahifa yangilanmaydi;
• bosilgan tugmaning value si oynaning "javobi" sifatida saqlanadi. Uni keyinchalik JavaScript o'qiydi (returnValue).

Formadagi tekshiruv esa ishlayveradi: required maydon bo'sh bo'lsa, oyna yopilmaydi va brauzer xato ko'rsatadi. Bu Brauzer validatsiyasi darsidagi oddiy qoida.

6.2 formmethod="dialog": bitta tugma uchun

Ko'pincha oynada haqiqiy forma bo'ladi: "Ha" serverga yuboradi, "Yo'q" esa faqat oynani yopadi. Tugmalar va yuborish darsida formmethod="dialog" ni eslatib o'tgan edik — endi uni ishlatamiz:

<dialog id="bekor-oyna">
  <form action="https://example.com/bron/bekor"
        method="post">
    <input type="hidden" name="bron_id" value="1024">
    <p>18:00 dagi bron bekor qilinsinmi?</p>
    <button type="submit">Ha, bekor qilish</button>
    <button type="submit" formmethod="dialog"
            formnovalidate autofocus>
      Yo'q, qoldirish
    </button>
  </form>
</dialog>

• "Ha, bekor qilish" — forma post bilan serverga ketadi.
• "Yo'q, qoldirish" — formmethod="dialog" formaning metodini faqat shu tugma uchun almashtiradi: oyna yopiladi, serverga hech narsa ketmaydi. formnovalidate esa bo'sh maydon bo'lsa ham tekshiruvni o'tkazib yuboradi. Axir mehmon shunchaki chiqib ketmoqchi.
• autofocus — xavfsiz tugmada.

6.3 command="close"

Formasiz ham yopish mumkin — 4-bo'limdagi buyruqlar bilan:

<button type="button" commandfor="bekor-oyna"
        command="close">
  Yopish
</button>

Bu tugma oyna ichida ham, tashqarisida ham tura oladi. Qaysi usulni tanlash kerak? Oyna ichida forma bo'lsa — method="dialog" yoki formmethod="dialog": ular 2022-yildan beri hamma joyda ishlaydi. command="close" esa yangiroq, lekin formasiz oynada qulay.

Diqqat: Oynada doim ko'rinadigan yopish tugmasi bo'lsin. Esc ga ishonib qolmang: iPhone'da Esc ham, "orqaga" tugmasi ham yo'q. Tugmasiz modal oyna telefondagi mehmonni "qamab" qo'yadi.

Tekshirib ko'ring: 6.2 dagi oynada "Yo'q, qoldirish" bosildi. Server bron_id=1024 ni oladimi?

7. closedby: oynani nima yopadi

7.1 Uch qiymat

Ba'zan oyna tashqarisiga — orqa fonga bosilganda ham yopilishi qulay. Ba'zan esa aksincha, oyna faqat tugma bilan yopilishi kerak. Buni closedby atributi hal qiladi:

Tashqariga bosib yopish light dismiss ("yengil yopish") deb ataladi. Keyingi darsdagi popover'larda u tez-tez uchraydi.

closedby yozilmasa: modal oyna closerequest kabi ishlaydi, non-modal esa none kabi.

<dialog id="rasm-oyna" closedby="any">
  <img src="../assets/images/osh.jpg" alt="Choyxona oshi, lagan to'la"
       width="600" height="400">
  <form method="dialog">
    <button type="submit">Yopish</button>
  </form>
</dialog>

Kattalashtirilgan rasmni tashqariga bosib yopish tabiiy — bu yerda any o'rinli. Tasdiq oynasi uchun esa sukut bo'yicha qiymat yaxshi: tasodifiy bosish bilan yopilib ketmasin.

7.2 Brauzer holati

closedby hozircha Limited availability: Chrome va Edge'da 134 dan, Firefox'da 141 dan bor. Safari'da hali yo'q (sinov versiyasida bor). Safari atributni tanimaydi va sukut bo'yicha ishlaydi: modal oyna Esc bilan yopiladi, tashqariga bosish esa yopmaydi.

Bundan ikki xulosa:

• closedby="any" — xavfsiz qo'shimcha. Safari'da mehmon oynani tugma yoki Esc bilan yopadi.
• closedby="none" ga tayanmang. Safari'da Esc modal oynani baribir yopadi. Oyna hech qachon yopilmasligi kerak bo'lgan holat bo'lmasligi kerak — bu mehmon uchun ham yomon.

8. Accessibility: oynaga nom bering

Ekran o'quvchi oyna ochilganda "dialog" deydi. Lekin qanday dialog? Oynaga nom berish uchun uning sarlavhasini aria-labelledby bilan bog'laymiz — bu usulni label darsida ko'rgan edik:

<dialog id="bekor-oyna" aria-labelledby="bekor-sarlavha">
  <h2 id="bekor-sarlavha">Bronni bekor qilasizmi?</h2>
  <p>18:00, 4 kishi. Bu amalni ortga qaytarib bo'lmaydi.</p>
  <form method="dialog">
    <button type="submit" autofocus>Yo'q, qoldirish</button>
  </form>
</dialog>

Endi ekran o'quvchi "Bronni bekor qilasizmi, dialog" deb e'lon qiladi.

Yana uch qoida:

• Oynaga tabindex yozmang — fokusni brauzer o'zi boshqaradi.
• Oyna matni qisqa va aniq bo'lsin: nima bo'ladi va uni ortga qaytarsa bo'ladimi.
• Tugma matni harakatni aytsin: "Ha, bekor qilish", "Yo'q, qoldirish". Shunchaki "OK" va "Cancel" emas.

9. «Bahor»: bronni bekor qilish oynasi

Hammasini "Mening bronlarim" sahifasida birlashtiramiz:

<!DOCTYPE html>
<html lang="uz">
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <title>Mening bronlarim — Choyxona «Bahor»</title>
</head>
<body>
  <main>
    <h1>Mening bronlarim</h1>
    <article>
      <h2>28-sentabr, 18:00 — 4 kishi</h2>
      <p>Stol: ayvon, 7-stol.</p>
      <button type="button" commandfor="bekor-oyna"
              command="show-modal">
        Bronni bekor qilish
      </button>
    </article>

    <dialog id="bekor-oyna" aria-labelledby="bekor-sarlavha">
      <h2 id="bekor-sarlavha">Bronni bekor qilasizmi?</h2>
      <p>28-sentabr, 18:00, 4 kishi. Stol boshqa mehmonga
        beriladi.</p>
      <form action="https://example.com/bron/bekor"
            method="post">
        <input type="hidden" name="bron_id" value="1024">
        <button type="submit">Ha, bekor qilish</button>
        <button type="submit" formmethod="dialog"
                formnovalidate autofocus>
          Yo'q, qoldirish
        </button>
      </form>
    </dialog>
  </main>
</body>
</html>

Qarorlar:

• command="show-modal" — tasdiq modal bo'lishi shart: mehmon avval javob beradi.
• closedby yo'q — sukut bo'yicha Esc yopadi, tashqariga tasodifan bosish esa yopmaydi.
• autofocus "Yo'q" da — shoshib bosilgan Enter bronni o'chirmaydi.
• Ikki tugma, bitta forma — "Ha" serverga, "Yo'q" faqat oynaga.
• Nom — aria-labelledby sarlavhaga ulangan.

Kod html-validate dan xatosiz o'tadi. Forma xavfsizligi darsidagi CSRF token haqiqiy loyihada shu formaga ham qo'shiladi.

10. Ko'p uchraydigan xatolar

10.1 open bilan "modal"

open atributi non-modal oyna beradi: orqa sahifa bosilaveradi, Esc ishlamaydi. Tuzatish: modal oyna command="show-modal" (yoki JavaScript'dagi showModal()) bilan ochiladi.

10.2 Tugma yo'q, commandfor xato

<!-- ❌ id da xato: bekor-oyna emas, bekor-oynasi -->
<button type="button" commandfor="bekor-oynasi"
        command="show-modal">
  Bronni bekor qilish
</button>

Tugma bosiladi — va hech narsa bo'lmaydi. Brauzer xato ko'rsatmaydi, html-validate ham bu xatoni ushlamaydi. Tuzatish: commandfor qiymatini oynaning id si bilan harfma-harf solishtiring. DevTools'ning Elements panelida Ctrl + F bilan id ni qidirib ko'ring.

10.3 type siz tugma formani yuboradi

Oynani ochuvchi tugma bron formasi ichida turibdi va type yo'q. Mehmon uni bosadi — forma yarim to'ldirilgan holda serverga ketadi. Tuzatish: oynani boshqaradigan har tugmaga type="button".

10.4 Yopish tugmasi yo'q

Faqat Esc ga tayangan oyna iPhone'da yopilmaydi. Tuzatish: har oynada ko'rinadigan "Yopish" yoki "Yo'q" tugmasi.

10.5 Hamma narsani modalga solish

"Bron qabul qilindi" kabi oddiy xabar uchun modal ortiqcha: mehmon ishini to'xtatib, "OK" bosishga majbur bo'ladi. Modal ustiga ikkinchi modal ochish esa undan ham yomon. Tuzatish: modal — faqat javob shart bo'lgan holat uchun. Oddiy xabar uchun keyingi darsdagi popover yetarli.

10.6 Soxta modal

div va JavaScript bilan yasalgan oyna 1-bo'limdagi beshta muammoning hammasini qaytaradi. dialog 2022-yildan beri hamma brauzerda bor — Widely available. Uni ishlatmaslikka sabab qolmadi.

11. Mashqlar

1-mashq (oson): Ish vaqti oynasi

"Ish vaqti" tugmasini va modal oynani yozing. Oynada: "Har kuni 7:00 dan 23:00 gacha" matni va "Yopish" tugmasi. Oynani form method="dialog" bilan yoping.

<button type="button" commandfor="vaqt-oyna"
        command="show-modal">
  Ish vaqti
</button>

<dialog id="vaqt-oyna">
  <p>Har kuni 7:00 dan 23:00 gacha.</p>
  <form method="dialog">
    <button type="submit">Yopish</button>
  </form>
</dialog>

2-mashq (o'rta): Menyu rasmi

Menyudagi osh rasmi yonida "Kattalashtirish" tugmasi bo'lsin. U rasmning katta nusxasini modal oynada ochsin. Oyna tashqariga bosilganda ham yopilsin. Oynada "Yopish" tugmasi ham bo'lsin — nega kerakligini bitta gap bilan yozing.

Eslatma: rasm uchun alt, width va height — Rasm qo'yish darsidagi qoida.

<button type="button" commandfor="osh-oyna"
        command="show-modal">
  Kattalashtirish
</button>

<dialog id="osh-oyna" closedby="any"
        aria-labelledby="osh-sarlavha">
  <h2 id="osh-sarlavha">Choyxona oshi</h2>
  <img src="../assets/images/osh-katta.jpg"
       alt="Lagandagi osh: sabzi, go'sht va no'xat"
       width="800" height="600">
  <form method="dialog">
    <button type="submit">Yopish</button>
  </form>
</dialog>

3-mashq (qiyin): Stolni ko'chirish oynasi

Mehmon bronini boshqa vaqtga ko'chirmoqchi. Modal oyna yozing:

1. Sarlavha: "Bronni ko'chirish", aria-labelledby bilan ulangan.
2. Majburiy select: 12:00, 15:00, 18:00 (birinchi option — bo'sh qiymatli "Vaqtni tanlang").
3. "Saqlash" — https://example.com/bron/kochir ga post bilan yuboradi.
4. "Bekor qilish" — faqat oynani yopadi, vaqt tanlanmagan bo'lsa ham.

Keyin savolga javob bering: "Bekor qilish" da formnovalidate bo'lmasa, nima bo'ladi?

Eslatma: bo'sh qiymatli birinchi option va required — Tanlash maydonlari darsidagi usul.

<dialog id="kochir-oyna" aria-labelledby="kochir-sarlavha">
  <h2 id="kochir-sarlavha">Bronni ko'chirish</h2>
  <form action="https://example.com/bron/kochir"
        method="post">
    <label for="yangi-vaqt">Yangi vaqt</label>
    <select id="yangi-vaqt" name="vaqt" required>
      <option value="">Vaqtni tanlang</option>
      <option value="12:00">12:00</option>
      <option value="15:00">15:00</option>
      <option value="18:00">18:00</option>
    </select>
    <button type="submit">Saqlash</button>
    <button type="submit" formmethod="dialog"
            formnovalidate>
      Bekor qilish
    </button>
  </form>
</dialog>

12. Real ishda

• Tasdiq oynalari — "O'chirilsinmi?", "Chiqib ketasizmi?", "To'lov tasdiqlansinmi?" — deyarli har bir ilovada bor. Zamonaviy loyihalarda ular dialog asosida quriladi.
• Komponent kutubxonalari. React uchun mashhur Radix va shadcn/ui kabi kutubxonalar (kursda o'rganamiz, hozir bilish shart emas) ham modal oynani yaratishda dialog dagi qoidalarni takrorlaydi: fokus, Esc, inert fon. Bu qoidalarni bilgan dasturchi har qanday kutubxonani tez tushunadi.
• Accessibility auditi. Soxta div modal — audit hisobotlarida eng ko'p uchraydigan xatolardan biri. Uni dialog ga almashtirish ko'pincha bir kunlik ish va o'nlab muammoni yopadi.
• Intervyuda so'raladi: "Modal oyna qanday bo'lishi kerak?" Kuchli javob: fokus oynaga o'tadi va yopilgach qaytadi, orqa fon inert, Esc yopadi, ko'rinadigan yopish tugmasi bor, nom aria-labelledby bilan — va dialog bularning ko'pini tekin beradi.

Xulosa

• dialog — tayyor oyna elementi; sukut bo'yicha yopiq, 2022-yildan Widely available.
• open atributi — non-modal oyna; modal oyna command="show-modal" yoki showModal() bilan ochiladi.
• Modal oyna tekin: top layer, ::backdrop, inert fon, fokus ichkariga va qaytib, Esc bilan yopilish.
• form method="dialog" va formmethod="dialog" oynani serverga hech narsa yubormasdan yopadi; formnovalidate — "Bekor qilish" uchun.
• closedby (any, closerequest, none) — hali Limited; any xavfsiz qo'shimcha, none ga tayanmang.
• autofocus — xavfsiz tugmada; oynaga nom — aria-labelledby; ko'rinadigan yopish tugmasi — doim.

Keyingi dars: Popover API — sahifani to'smaydigan kichik oynalar: menyu, maslahat va bildirishnomalarni popover atributi bilan JavaScript'siz ochamiz.

Manbalar

• MDN: "dialog: The Dialog element" va "closedby" — developer.mozilla.org
• MDN: "Invoker Commands API" — developer.mozilla.org
• Web Features Explorer: "dialog", "dialog-closedby", "invoker-commands" — web-platform-dx.github.io/web-features-explorer
• WHATWG HTML Living Standard: "The dialog element" — html.spec.whatwg.org