HTML <dialog>

<dialog> — sahifada modal oyna (dialog) yaratadigan teg. Tasdiqlash so’rovi, ogohlantirish, forma yoki xabar oynasi aynan shu teg orqali quriladi. HTML5’gacha bunday oynalar faqat JavaScript va murakkab kod bilan yaratilardi; endi esa maxsus teg bor.

<dialog> — sahifa ustida modal yoki oddiy dialog oynasini yaratadigan teg. U ochish va yopish uchun JavaScript metodlariga ega.

Oddiy foydalanish

<dialog> tegi oyna kontentini o’z ichiga oladi. Uni ochish uchun JavaScript ishlatiladi:

<dialog id="oyna">
    <p>Salom, UzbekDevs!</p>
    <button onclick="oyna.close()">Yopish</button>
</dialog>
<button onclick="oyna.showModal()">Oynani ochish</button>

[ Oynani ochish ] → bosilganda modal oyna chiqadi:
   Salom, UzbekDevs!
   [ Yopish ]

showModal() oynani sahifa ustida (modal sifatida) ochadi, close() esa yopadi. Modal oyna ochilganda, orqadagi sahifa vaqtincha bloklanadi.

showModal va show farqi

<dialog> ni ochishning ikki usuli bor. Ularni jadvalda solishtiramiz:

showModal() foydalanuvchini oynaga e’tibor berishga majbur qiladi (tasdiqlash uchun), show() esa sahifa bilan parallel ishlashga ruxsat beradi.

Forma bilan dialog

<dialog> ichida forma joylashtirish mumkin. method="dialog" bilan forma yuborilganda oyna avtomatik yopiladi:

<dialog id="forma">
    <form method="dialog">
        <p>Ismingiz: <input type="text"></p>
        <button>Tasdiqlash</button>
    </form>
</dialog>

[Modal oyna: Ismingiz maydoni va Tasdiqlash tugmasi]

method="dialog" — bu forma yuborilganda oynani yopadigan maxsus qiymat. Bu tasdiqlash oynalarini yaratishni juda soddalashtiradi.

Amaliy eslatma

<dialog> zamonaviy va qulay, ammo uni ochish/yopish uchun oz miqdorda JavaScript kerak bo’ladi (showModal, close). Uning katta afzalligi — brauzer modal oynaning barcha murakkab mantig’ini (fon bloklash, markazlashtirish, Esc bilan yopish) o’zi hal qiladi. Bu tasdiqlash va xabar oynalarini yaratishning eng toza usuli.

Xulosa

Bu bo’limda <dialog> tegini, showModal()/show() bilan ochishni, ularning farqini va forma bilan ishlashni ko’rib chiqdik. <dialog> — modal oynalar uchun zamonaviy yechim. Keyingi darsda <div> tegiga o’tamiz.