Criando Modal com HTML e Javascript puro

Gunnar CorreaGunnar Correa23/11/2020 às 21:10:57 - 242 acessos

Criando Modal com HTML e Javascript puro

Modal são elementos que aparecem em primeiro plano deixando seu conteúdo em destaque.


Modal é um recurso muito interessante e utilizado para melhorar a experiência com o usuário, ou até mesmo, exibir mensagens importantes, como atualização, mudança nos termos de uso, entre outros.

Existem muitas bibliotecas para se criar um modal elegante, com efeitos de transação, fade in/out, como os que estão embutidos na biblioteca do Bootstrap.

Aqui, vamos criar um simples modal, sem utilizar nenhum framework, utilizando apenas recursos nativos do HTML, CSS e Javascript, então, assista a aula abaixo e aprenda você mesmo construir seus modais do zero.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal HTML</title>

    <link rel="preload" href="style.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="content">

        <button class="btn" onclick="openModal('dv-modal')">Abrir modal</button>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, vero corporis amet impedit veniam rerum
            maxime doloribus adipisci perferendis explicabo sequi. Suscipit cumque eius alias necessitatibus consectetur
            quasi tempora temporibus.</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt iusto quae atque commodi rem amet, in ipsam
            vitae fuga, laboriosam, at autem velit! Sit similique numquam nulla magnam, dignissimos voluptatem.</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, vero corporis amet impedit veniam rerum
            maxime doloribus adipisci perferendis explicabo sequi. Suscipit cumque eius alias necessitatibus consectetur
            quasi tempora temporibus.</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt iusto quae atque commodi rem amet, in ipsam
            vitae fuga, laboriosam, at autem velit! Sit similique numquam nulla magnam, dignissimos voluptatem.</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, vero corporis amet impedit veniam rerum
            maxime doloribus adipisci perferendis explicabo sequi. Suscipit cumque eius alias necessitatibus consectetur
            quasi tempora temporibus.</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt iusto quae atque commodi rem amet, in ipsam
            vitae fuga, laboriosam, at autem velit! Sit similique numquam nulla magnam, dignissimos voluptatem.</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, vero corporis amet impedit veniam rerum
            maxime doloribus adipisci perferendis explicabo sequi. Suscipit cumque eius alias necessitatibus consectetur
            quasi tempora temporibus.</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt iusto quae atque commodi rem amet, in ipsam
            vitae fuga, laboriosam, at autem velit! Sit similique numquam nulla magnam, dignissimos voluptatem.</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, vero corporis amet impedit veniam rerum
            maxime doloribus adipisci perferendis explicabo sequi. Suscipit cumque eius alias necessitatibus consectetur
            quasi tempora temporibus.</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt iusto quae atque commodi rem amet, in ipsam
            vitae fuga, laboriosam, at autem velit! Sit similique numquam nulla magnam, dignissimos voluptatem.</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, vero corporis amet impedit veniam rerum
            maxime doloribus adipisci perferendis explicabo sequi. Suscipit cumque eius alias necessitatibus consectetur
            quasi tempora temporibus.</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt iusto quae atque commodi rem amet, in ipsam
            vitae fuga, laboriosam, at autem velit! Sit similique numquam nulla magnam, dignissimos voluptatem.</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, vero corporis amet impedit veniam rerum
            maxime doloribus adipisci perferendis explicabo sequi. Suscipit cumque eius alias necessitatibus consectetur
            quasi tempora temporibus.</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt iusto quae atque commodi rem amet, in ipsam
            vitae fuga, laboriosam, at autem velit! Sit similique numquam nulla magnam, dignissimos voluptatem.</p>
    </div>

    <div id="dv-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h1>Meu modal com HTML</h1>
            </div>

            <div class="modal-body">
                <p>Integer in augue felis. Quisque bibendum luctus sapien in egestas. Proin ullamcorper tempus eleifend.
                    Sed at sollicitudin libero. Maecenas sodales condimentum sapien vel mattis. Nam lacinia risus vel
                    nisl venenatis rhoncus. Duis sit amet massa maximus, mollis mi ac, pellentesque purus. Orci varius
                    natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc dictum neque
                    faucibus fringilla pellentesque. Phasellus malesuada aliquet augue. Mauris at eleifend risus, sit
                    amet scelerisque augue.</p>

                    <img src="https://satellasoft.com/img/artigos/2020/08/260/steam-store.JPG" alt="The Witcher" style="width: 100%;">
            </div>

            <div class="modal-footer">
                <button class="btn" onclick="closeModal('dv-modal')">Fechar</button>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>

</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

* {
    font-family: 'Open Sans', sans-serif;
}

p {
    text-align: justify;
}

.content {
    margin: 0 auto;
    max-width: 900px;
    background-color: #eee;
    padding: 10px;
}

.btn {
    background-color: rgb(33, 156, 70);
    padding: 5px 10px 5px 10px;
    border: 2px solid rgb(4, 92, 30);
    cursor: pointer;
    transition: background .3s;
    border-radius: 5px;
    color: #FFF;
}

.btn:hover {
    background-color: rgb(4, 92, 30);
}

.btn:active {
    background-color: rgb(129, 255, 166);
    color: rgb(4, 92, 30);
}

.modal {
    background-color: rgba(0, 0, 0, .8);
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
}

.modal-content {
    margin: 0 auto;
    margin-top: 3%;
    max-width: 600px;
    background-color: #eee;
    padding: 0;
    box-shadow: 0 0 2px #fff;
}

.modal-header h1{
    font-weight: bold;
    text-align: center;
}

.modal-header, .modal-body, .modal-footer{
    padding: 10px;
}

.modal-header{
    background-color: #ccc;
}

.modal-footer{
    background-color: #ccc;
}

script.js

function openModal(mn) {
    let modal = document.getElementById(mn);

    if (typeof modal == 'undefined' || modal === null)
        return;

    modal.style.display = 'Block';
    document.body.style.overflow = 'hidden';
}

function closeModal(mn) {
    let modal = document.getElementById(mn);

    if (typeof modal == 'undefined' || modal === null)
        return;

    modal.style.display = 'none';
    document.body.style.overflow = 'auto';
}


Bem, espero que tenha gostado e aprendido.

Até logo.


modal html modal css modal javascript como fazer modal modal sem jquery modal simples modal para sites janelas modal

Compartilhe nas redes sociais



Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web, Especialista em Tecnologias na Educação e Pós-graduando em Segurança da Informação. Começou seus estudos na área de programação quando era criança, e atualmente, está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.