Kipengele asilia cha dialog kinafanya kazi vipi?

Question

Accepted Answer

`<dialog>` ni kipengele asilia cha **modals na dialogs**. Kinashughulikia kunasa focus, backdrop, top layer, na kufunga kwa Escape — vipengele ambavyo vinginevyo ungelazimika kuvitengeneza kwa mkono kwa JavaScript nyingi na ARIA.

```html
<dialog id="myModal">
  <form method="dialog">           
    <h2>Confirm</h2>
    <p>Are you sure?</p>
    <button value="cancel">Cancel</button>
    <button value="ok">OK</button>
  </form>
</dialog>
```

## Kufungua na kufunga katika JS

```js
const modal = document.getElementById("myModal");

modal.showModal(); // opens as a MODAL: backdrop + focus trapped + Esc closes
modal.show();      // opens as a NON-modal (no backdrop, page stays interactive)
modal.close("ok"); // closes, sets returnValue

modal.addEventListener("close", () => {
  console.log(modal.returnValue); // "ok" or "cancel" — from the button's value
});
```

## Unachopata bila malipo na showModal()

- **Kunasa focus** — Tab inabaki ndani ya dialog ilipofunguliwa.
- **Backdrop** — inayoweza kupewa mtindo kupitia `::backdrop`, na kubofya nje kunaweza kutambulika.
- **Top layer** — inatolewa juu ya kila kitu bila kujali `z-index`.
- **Kitufe cha Escape** kinaifunga.
- **`method="dialog"`** kwenye form inafunga dialog na kurekodi ni kitufe gani kilichowasilisha.

## Kupamba backdrop

```css
dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
dialog { border: none; border-radius: 8px; padding: 2rem; }
```

## Kwa nini ni muhimu

Kabla ya `<dialog>`, modals zinazofikika zilihitaji usimamizi wa focus wa mkono, ARIA roles, kufunga scroll, na kushughulikia Escape — chanzo maarufu cha hitilafu.

Kipengele asilia kinakupa yote hayo kwa usahihi moja kwa moja.

Tumia `showModal()` kwa modals za kweli; ni chaguo-msingi la kisasa na linalofikika kwa dialogs.