JavaScript ile Modal Pencere Oluşturma
Web sitelerinde kullanıcıya bilgi göstermek, onay almak veya bir form açmak için modal pencere (popup) kullanılır. Bu örnekte yalnızca saf JavaScript kullanarak tıklamayla açılıp kapanan basit bir modal yapısı oluşturuyoruz. Hiçbir kütüphane kullanılmadığı için hem hızlı hem de her tarayıcıyla uyumludur.
<style>
#modal {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
justify-content: center;
align-items: center;
}
.icerik {
background: #fff;
padding: 20px;
border-radius: 8px;
min-width: 250px;
text-align: center;
}
</style>
<button id="ac">Modal Aç</button>
<div id="modal">
<div class="icerik">
<p>Merhaba 👋 Bu bir modal penceredir.</p>
<button id="kapat">Kapat</button>
</div>
</div>
<script>
const modal = document.getElementById("modal");
const ac = document.getElementById("ac");
const kapat = document.getElementById("kapat");
ac.addEventListener("click", () => modal.style.display = "flex");
kapat.addEventListener("click", () => modal.style.display = "none");
modal.addEventListener("click", (e) => {
if (e.target === modal) modal.style.display = "none";
});
</script>Kod Açıklaması
Web sitelerinde kullanıcıya bilgi göstermek, onay almak veya bir form açmak için modal pencere (popup) kullanılır.
Bu örnekte yalnızca saf JavaScript kullanarak tıklamayla açılıp kapanan basit bir modal yapısı oluşturuyoruz.
Hiçbir kütüphane kullanılmadığı için hem hızlı hem de her tarayıcıyla uyumludur.
Nasıl Çalışır?
Bu kod örneği, Web Speech API kullanılarak sesli olarak açıklanmaktadır. Kod bloğunun üzerine mouse ile geldiğinizde otomatik olarak açıklama başlar.
Kullanım Alanları
Web Speech API
Bu kod örneği Web Speech API kullanılarak sesli olarak açıklanmaktadır.
İlgili Kodlar
// ZebifyTech Konuşan Kodlar'a Hoş Geldiniz 🎙️
// Bu örnek, dinamik bir karşılama mesajı oluşturur.
const platform = "ZebifyTech";
const bolum = "Konuşan Kodlar";
function hosGeld...ZebifyTech Konuşan Kodlar’a Hoş Geldiniz
<form id="iletisimFormu">
<input id="ad" placeholder="Adınızı girin">
<input id="email" placeholder="E-posta adresiniz">
<button type="submit">Gönder</button>
</form>
<script>
docume...JavaScript ile Form Doğrulama (Boş Alan Kontrolü)
Kendi Konuşan Kodunuzu Oluşturun
Web Speech API ile kendi projelerinizde de konuşan kod örnekleri oluşturabilirsiniz.