Javascript

Javascript’te `Evet/Hayır` Sorusu Oluşturma

Web uygulamaları geliştirirken, kullanıcı etkileşimi sorunsuz bir deneyim yaratmak için çok önemlidir. Geliştiricilerin karşılaştığı yaygın senaryolardan biri, kullanıcılara bir Evet/Hayır sorusu sorma ihtiyacıdır. Ancak, Javascript’teki standart confirm() fonksiyonu, işlevsel olmasına rağmen yalnızca Tamam/Iptal butonları sunar. Peki, kullanıcılara net Evet/Hayır seçenekleri sunan daha özel bir modal kutusu oluşturmak için ne yapılabilir?

Javascript, birkaç yerleşik modal kutu sunar: alert, confirm ve prompt. Ancak bunların hiçbiri açık bir Evet/Hayır seçeneği sağlayamaz. İşte bu seçeneklerin hızlı bir incelemesi:

alert(): Kullanıcıya bir mesaj gösterir ve bir Tamam butonu bulunur. Bildirimler için yararlıdır, ancak soru sormaz.
confirm(): Evet/Hayır sorusu sorar ve Boolean (true veya false) döner. Ancak, Evet/Hayır yerine Tamam/Iptal butonlarını kullanır.
prompt(): Kullanıcı girişine izin verir ama evet/hayır etkileşimleri için uygun değildir ve yalnızca Tamam/Iptal butonları vardır.

Bu yerleşik işlevlerin özel ihtiyaçlarınızı karşılamaması, bizi özel çözümleri keşfetmeye yönlendiriyor.

Evet/Hayır sorusu istemi oluşturmak için birçok geliştirici, daha özelleştirilebilir diyalog kutuları sağlayan üçüncü taraf kütüphaneler kullanmayı tercih eder. Bu çözümlerden biri ModalBox’tır. İşte onu uygulamanın hızlı bir incelemesi:

ModalBox Kullanımı

Kurulum: Öncelikle ModalBox’ı projenize dahil edin. Kütüphaneyi GitHub’da burada bulabilirsiniz.

HTML Yapısı: Modal kutunuzun HTML formatını oluşturun. İşte modal için basit bir yapının örneği:

<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>Devam etmek istediğinizden emin misiniz?</p>
        <button id="yesButton">Evet</button>
        <button id="noButton">Hayır</button>
    </div>
</div>

Modal’ı Şekillendirme: Kullanıcı deneyimi için modalınıza stil eklemeyi unutmayın. İşte basit bir CSS örneği:

.modal {
    display: none; 
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;
    overflow: auto; 
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; 
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

Javascript Fonksiyonu: Son olarak, modalı gerektiğinde açacak ve buton tıklamalarını yönetecek Javascript ekleyin:

document.getElementById('myModal').style.display = "block"; // Modali aç

document.getElementById("yesButton").onclick = function() {
    console.log("Kullanıcı Evet'e tıkladı");
    // "Evet" için eyleminizi buraya ekleyin
    document.getElementById('myModal').style.display = "none"; 
}

document.getElementById("noButton").onclick = function() {
    console.log("Kullanıcı Hayır'a tıkladı");
    // "Hayır" için eyleminizi buraya ekleyin
    document.getElementById('myModal').style.display = "none"; 
}

document.getElementsByClassName("close")[0].onclick = function() {
    document.getElementById('myModal').style.display = "none"; 
}

Sonuç

Javascript’te özelleştirilmiş bir Evet/Hayır sorusu oluşturmak, yerleşik işlevlere dayanmak yerine modal kutusu kütüphanelerini kullanarak mümkündür. ModalBox veya başka bir alternatif kullanmayı tercih etseniz de, bu özel çözümler, web uygulamalarınızda etkileşimi artırarak daha iyi bir kullanıcı deneyimi sunar.

Mevcut kütüphaneleri keşfedin ve projenizin stil ve işlevsellik ihtiyaçlarına en uygun olanı seçin; böylece kullanıcılarınızı net ve erişilebilir Evet/Hayır sorularıyla karşılayabileceksiniz.

Javascript’te Evet/Hayır Sorusu Oluşturma

Yerleşik Modal Kutuların Sınırlamaları

Özel Modal Popup Çözümleri

ModalBox Kullanımı

Sonuç

Javascript’te `Evet/Hayır` Sorusu Oluşturma