Basit HTML Modal Yapımı

<article> gibi HTML5 öğelerini ilk aldığımızda, tarayıcının destekleyip desteklemediği önemli değildi çünkü bu senaryolarda eğer onu kullanırsanız daha kötüsü yoktu. Bunu blok düzeyinde yapabilirdiniz ve zaten kullanacağınız anlamsız bir div gibiydi.

Bununla birlikte, <dialog> u “daha anlamsal bir <div> olarak kullanırız. Bunun için çok fazla işlevselliği mevcut. Videoda dialog ile basit bir modal oluşturdum. Tüm tarayıcıların tam olarak destek vermediğini göz önünde bulundurarak siz de sitelerinizde bu tür modalları kullanabilirsiniz.

HTML Kod:


<body>
    <button id="ac">Modal Aç</button>
    <output>Bilgiler</output>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora iusto doloremque, quia maiores modi cumque quis optio nobis fugiat. Beatae, soluta perferendis. Dolore nesciunt alias, officiis iusto excepturi facere dolores?</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora iusto doloremque, quia maiores modi cumque quis optio nobis fugiat. Beatae, soluta perferendis. Dolore nesciunt alias, officiis iusto excepturi facere dolores?</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora iusto doloremque, quia maiores modi cumque quis optio nobis fugiat. Beatae, soluta perferendis. Dolore nesciunt alias, officiis iusto excepturi facere dolores?</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora iusto doloremque, quia maiores modi cumque quis optio nobis fugiat. Beatae, soluta perferendis. Dolore nesciunt alias, officiis iusto excepturi facere dolores?</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora iusto doloremque, quia maiores modi cumque quis optio nobis fugiat. Beatae, soluta perferendis. Dolore nesciunt alias, officiis iusto excepturi facere dolores?</p>

    <dialog id="modal">
        <form action="" method="dialog">
            <div>
                <h2>Modal Panel</h2>
            </div>
            <div>
                <p>
                    Abonelik sözleşmesini kabul etmek için "Tamam" butonuna tıklayın.
                </p>
            </div>
            <div>
                <menu>
                    <button  value="onay">Tamam</button>
                    <button  value="iptal">İptal</button>
                </menu>
            </div>
        </form>
    </dialog>

    <script>
        var modalAc=document.querySelector("#ac");
        var modal=document.querySelector("#modal");
        var output=document.querySelector("output");

        modalAc.addEventListener("click",function(){
            
            modal.showModal();
        });

        modal.addEventListener("close",function(){
            
            if(modal.returnValue=="onay")
            {
            output.value="abone oldunuz.";
            }
            else
            {
            output.value="abonelik iptal ettiniz.";
                
            }
        });

    </script>
</body>

<body>

<button id="ac">Modal Aç</button>

<output>Bilgiler</output>

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora iusto doloremque, quia maiores modi cumque quis optio nobis fugiat. Beatae, soluta perferendis. Dolore nesciunt alias, officiis iusto excepturi facere dolores?</p>

<div>

<h2>Modal Panel</h2>

</div>

<div>

<p>

Abonelik sözleşmesini kabul etmek için "Tamam" butonuna tıklayın.

</p>

</div>

<div>

<menu>

<button value="onay">Tamam</button>

<button value="iptal">İptal</button>

</menu>

</div>

</form>

</dialog>

var modalAc=document.querySelector("#ac");

var modal=document.querySelector("#modal");

var output=document.querySelector("output");

modalAc.addEventListener("click",function(){

modal.showModal();

});

modal.addEventListener("close",function(){

if(modal.returnValue=="onay")

{

output.value="abone oldunuz.";

}

else

{

output.value="abonelik iptal ettiniz.";

}

});

</script>

</body>

Bunu paylaş:

Şunlar da Hoşunuza Gidebilir

Yorum yap X