Criando Modal com HTML e Javascript puro

Curso Escrevendo testes automatizados com PHPUnit

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.webp" 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.