JavaScript ile Modern Diyalog ve Bildirim Sistemleri

Kullanıcıya bilgi vermek veya bir işlem onayı almak için JavaScript'te iki ana yöntem vardır: Tarayıcının yerleşik (native) fonksiyonları ve tamamen sizin tasarladığınız özel (custom) modal yapıları.

1) Yerleşik Tarayıcı Diyalogları

Hızlı ve basit çözümler için tarayıcının sunduğu hazır fonksiyonlardır. Ancak görsel olarak özelleştirilemezler.

• alert("Mesaj"): Bilgi verir.
• confirm("Emin misiniz?"): Kullanıcıdan onay (True/False) alır.
• prompt("Adınız nedir?"): Kullanıcıdan metin girdisi alır.

2) Modern UI Örnekleri: Modal ve Toast

Profesyonel projelerde kullanıcı deneyimi için HTML/CSS ile hazırlanan ve JS ile tetiklenen yapılar tercih edilir.

// 1. Basit Modal Açma/Kapama
function modalToggle(status) {
    const modal = document.querySelector("#myModal");
    modal.style.display = status ? "flex" : "none";
}

// 2. Toast (Anlık Bildirim) Fonksiyonu
function showToast(message, type = "success") {
    const toast = document.createElement("div");
    toast.className = `toast-box ${type}`;
    toast.textContent = message;
    document.body.appendChild(toast);
    
    // 3 saniye sonra otomatik sil
    setTimeout(() => toast.remove(), 3000);
}

// 3. Loading (Yükleniyor) Durumu
function setLoading(active) {
    const btn = document.querySelector("#saveBtn");
    btn.disabled = active;
    btn.innerHTML = active ? "Yükleniyor..." : "Kaydet";
}

Neden Özel (Custom) Modallar?

Özet

• alert ve confirm hızlı hata ayıklama için idealdir.
• Profesyonel sitelerde **Modal** ve **Toast** yapıları kullanıcıyı siteden koparmaz.
• İşlem sırasında butonu **Loading** durumuna getirmek, kullanıcının defalarca tıklamasını (double-submit) engeller.