Site icon Netopsiyon Online

HTML’de Açılır Pencere (Modal) Nasıl Yapılır?

Ali Osman

Web sitelerinde açılır pencereler (modal), kullanıcıların dikkatini çekmek, formlar göstermek veya belirli bir işlemi gerçekleştirmek için sıkça kullanılır. Örneğin, bir giriş formu, uyarı mesajı veya resim ön izleme gibi alanlarda modal pencereler oldukça işe yarar. Bu yazıda, HTML, CSS ve JavaScript kullanarak nasıl şık ve işlevsel bir modal pencere oluşturabileceğinizi adım adım göstereceğim.

Temel HTML ile Modal Yapımı

Bir modal pencere oluşturmanın temel mantığı, başlangıçta gizli bir HTML öğesi oluşturup, belirli bir butona tıklandığında bunu görünür hale getirmektir. İşte en basit haliyle HTML yapısı:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basit Modal Örneği</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <button id="modalAc">Modali Aç</button>
    <div id="modal" class="modal">
        <div class="modal-icerik">
            <span class="kapat">&times;</span>
            <h2>Merhaba!</h2>
            <p>Bu basit bir modal pencere örneğidir.</p>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Bu yapıda, bir buton (#modalAc) ile modal pencereyi açıyoruz. Modal penceremiz başlangıçta gizli (display: none;) olacak ve JavaScript ile görünür hale getireceğiz.

CSS ile Modal Tasarımı

Modal pencerenin güzel görünmesi için bazı temel CSS kodlarına ihtiyacımız var:

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

.modal-icerik {
    background-color: white;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 40%;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
    border-radius: 8px;
}

.kapat {
    float: right;
    font-size: 28px;
    cursor: pointer;
}

.kapat:hover {
    color: red;
}

Burada modal penceremizi ekranın ortasına yerleştiriyoruz ve arka plana hafif bir karartma efekti ekliyoruz. kapat butonuna fareyle gelindiğinde renginin değişmesini sağlıyoruz.

JavaScript ile Modal Kontrolleri

Şimdi de modal penceremizin açılmasını ve kapanmasını kontrol etmek için basit bir JavaScript kodu ekleyelim:

document.addEventListener("DOMContentLoaded", function() {
    let modal = document.getElementById("modal");
    let acButon = document.getElementById("modalAc");
    let kapat = document.querySelector(".kapat");
    
    acButon.addEventListener("click", function() {
        modal.style.display = "block";
    });
    
    kapat.addEventListener("click", function() {
        modal.style.display = "none";
    });
    
    window.addEventListener("click", function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    });
});

Bu kod:

Tüm bu HTML, CSS ve JavaScript kodlarını bir araya getirdiğinizde tam işlevsel bir modal pencere elde etmiş oluyorsunuz. Eğer farklı bir tasarım veya animasyon eklemek isterseniz, CSS ile modalin giriş çıkış efektlerini değiştirebilirsiniz.

HTML ve CSS ile modern, şık bir modal pencere oluşturmak oldukça kolaydır. JavaScript ile kontrol mekanizmasını ekleyerek, kullanıcı dostu bir deneyim sunabilirsiniz. Daha ileri seviye kullanımlar için animasyonlar ve farklı açılma/kapanma efektleri eklemeyi deneyebilirsiniz. Umarım bu rehber, kendi projelerinizde modal kullanırken işinize yarar!

Exit mobile version