Pratik UI Örnekleri: Modal • Toast • Loading

Bu sayfada JavaScript ile en sık ihtiyaç duyulan 3 UI davranışını “küçük ve temiz” şekilde kuruyoruz: Modal aç/kapat, toast bildirim ve loading state.

1) Demo Butonları

Aşağıdaki butonlarla modal/toast/loading davranışlarını test edebilirsin.

2) Modal (Aç/Kapat + ESC + Dışarı Tıkla)

Modal için dikkat edilmesi gereken püf noktalar:

• ESC ile kapat
• Backdrop (dış alan) tıklanınca kapat
• Sayfa scroll’unu modal açıkken kilitle (body { overflow:hidden })
• Odak yönetimi (ileri seviye): ilk input’a fokus, tab tuşu ile içeride kalma (istersen ekleriz)

<!-- Modal Backdrop -->
<div class="ui-modal-backdrop" id="modalBackdrop" aria-hidden="true">
  <div class="ui-modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
    <div class="ui-modal-header">
      <div>
        <div class="ui-modal-title" id="modalTitle">Örnek Modal</div>
        <div class="ui-modal-sub">Aç/Kapat, ESC ve dışarı tıklama destekli.</div>
      </div>
      <button class="ui-icon-btn" data-modal-close aria-label="Kapat">×</button>
    </div>

    <div class="ui-modal-body">
      <label class="ui-label">Ad Soyad</label>
      <input class="ui-input" placeholder="Örn: Mehmet Erbaş">

      <label class="ui-label mt-2">Not</label>
      <textarea class="ui-textarea" rows="3" placeholder="Kısa not..."></textarea>
    </div>

    <div class="ui-modal-footer">
      <button class="btn btn-light" data-modal-close>Vazgeç</button>
      <button class="btn btn-primary" id="btnModalSave">Kaydet</button>
    </div>
  </div>
</div>

3) Toast Bildirim (Stack + Auto Close)

Toast’lar “işlem sonucu geri bildirimi” için idealdir. Başarılı, hata, bilgi gibi tipleri ayrı göster. Kısa yaşasın ama kullanıcı okuyabilsin (örn. 3–5 sn).

// Örnek:
// toast("Kaydedildi ✅", "success");
// toast("Bir hata oluştu ❌", "error");
// toast("Bilgi: işlem başladı", "info");

4) Loading State (Overlay + Buton Spinner)

Gerçek senaryoda fetch/AJAX sırasında aktif edilir. Burada “fake async” ile 1.5sn bekletiyoruz.