Yaya abin dialog na asali ke aiki?

Question

Accepted Answer

`<dialog>` shine abin dialog na asali don **modals da dialogs**. Yana jiya tunkarar mayaafi, bafin gida, matakin gida, da Escape-zuwa-rufe — fasalai da za ka gina ta tsakani tare da girma JavaScript da 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>
```

## Bubuwa da rufewa a cikin 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
});
```

## Abin da ka samu kyauta tare da showModal()

- **Tunkarar mayaafi** — Tab ya rage jiya cikin dialog yayin da ake bubuwa.
- **Bafin gida** — ana iya yin gida ta hanyar `::backdrop`, da k'lic a waje ba a iya gano ba.
- **Matakin gida** — yana sakawa sama da duk wani dole ba `z-index`.
- **Buttona Escape ya rufe shi.**
- **`method="dialog"`** akan nau'i yana rufe dialog da yana rikitacciya wane buttona ya ƙaddas.

## Yin gida ga bafin gida

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

## Domin ya muhimma

Kadar `<dialog>`, modals masu saurin kai suna buƙatar jiya tunkarar mayaafi ta hannu, rolin ARIA, rufewa na bugun jini, da jiya Escape — tushe sanannun kurakurai.

Abin dialog na asali yana ba ka duk wannan da qasida daidai.

yi amfani da `showModal()` don modals gaskiya; ita ce matakin zamani, masu saurin kai kayan kwatancewa don dialogs.