Modal fonksiyonu - MAKALE

Sizler için basit bir modal fonksiyonu hazırladım...
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Modal Açma Fonksiyonu - Yusuf ÖZÇELİK - @webdevyusuf</title>
    <style>
        .modal-container {
            position: fixed;
            display: none;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: #a0a0a0;
        }
        
        .modal-content {
            width: 500px;
            margin: auto;
        }
        
        .modal-container.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="modal-container">
        <div class="modal-content">
            <h1>Hoşgeldin, Yusuf!</h1>
            <button class="close-button">&times;</button>
        </div>
    </div>
    <button class="open-button">Modalı Aç</button>
    <script>
        function modal(modalName, openBtnName, closeBtnName, className = "active") {

            // Tanımlamalar
            let modal = document.querySelector(modalName),
                openBtn = document.querySelector(openBtnName),
                closeBtn = document.querySelector(closeBtnName);
                
            // Modali açma butonuna basıldığında active classını ekle
            openBtn.addEventListener("click", () => {
                modal.classList.add("active");
            });
            
            // Modali kapama butonuna basıldığında active classını sil
            closeBtn.addEventListener("click", () => {
                modal.classList.remove("active");
            });
            
            // Modalin container'ına basıldığında active classını sil
            modal.addEventListener("click", (e) => {
                if (e.target == this) {
                    modal.classList.remove("active");
                }
            });
            
            // Sitede escape tuşuna basıldığında modaldan active classını sil
            window.addEventListener("keyup", (e) => {
                if (e.keyCode == 27) {
                    modal.classList.add("active");
                }
            });

        }
        
        modal(".modal-container", ".open-button", ".close-button");
    </script>
</body>
</html>
Modal fonksiyonu - MAKALE

Soru hatalı mı? 👎

Cevap yaz

Cevaplar (2)
