Modal Popup em 10 minutos com Javascript e Bootstrap

31/10/2024

Neste tutorial aprenderemos como fazer um modal de popup para exibição de mensagens no seu site de maneira bem rápida utilizando o Bootstrap.

Modal no Bootstrap

O modal normalmente é para exibir uma mensagem tal como: "Formulário enviado com sucesso", "Houve um erro", etc.

O Bootstrap nos ajuda muito a fazer essa popup rápido.

index.html

No html linkaremos a CDN do bootstrap e faremos a inserção do html e do CSS.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <style>
        .modal-header{
            background: #666;
        }
    </style>
</head>
<body>

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
        Launch demo modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Apresentação</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Este é o canal da Webdesign em Foco <br>
                    <input type="text">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

Então é isso, por hoje é só! Fiquem todos com Deus! Sucesso nos códigos e na vida!

Precisa de ajuda na criação de planilhas? webdesignemfoco@gmail.com

Ninguém vem ao Pai, senão por mim. João 14:6

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Vanilla Javascript - Alterando CSS pelo Javascript

No tutorial de hoje aprenderemos como alterar o CSS de um site dinamicamente através do Javascript para deixar o site mais interativo.

Checkbox Interruptor em 9 minutos com Javascript e Bootstrap

Neste tutorial aprenderemos como fazer um checkbox personalizado no estilo de um interruptor. Para isso, utilizaremos o Bootstrap.

Javascript

Ensinaremos durante as aulas a codificaÃ§Ã£o desta importante linguagem de programaÃ§Ã£o.