Bootstrap Modal: Como utilizar em seus projetos

Veja neste artigo como criar janelas modais em seus projetos web utilizando o framework Bootstrap.

Motivação

A utilização de janelas modais em aplicações web oferece uma forma para exibição e coleta de dados que otimiza o uso do espaço da página, mantendo mensagens e formulários ocultos e os exibindo apenas quando necessário.

Esse tipo de componente é amplamente empregado para apresentar mensagens ao usuário, bem como para solicitar confirmações e preenchimento de formulários, sem que seja necessário redirecioná-lo para outra página.

Nesse artigo, veremos como criar modais através do Bootstrap, que já traz uma série de recursos para esse fim, bastando apenas seguir uma estrutura padrão para utilizá-los.

Saiba mais sobre: O framework Bootstrap

Utilizando o Bootstrap

Para fazer uso do Bootstrap em um projeto, devemos importar seu arquivo CSS. Esse arquivo pode ser obtido no site oficial ou referenciado diretamente a partir da sua CDN (Content Delivery Network). Feito isso, para utilizar o recurso de modais será preciso importar também o arquivo JavaScript do Bootstrap e a biblioteca jQuery, da qual ele depende.

Na Listagem 1 temos o código padrão de uma página HTML já referenciando os arquivos do Bootstrap e jQuery.

Listagem 1. Estrutura da página para uso de modais 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
    $(function(){
        //código para exibir os modais
    });
    </script>     
</body>
</html>

Modal básico

O Bootstrap possui uma estrutura padrão para os modais que deve ser seguida sempre que esse componente for necessário ao projeto. Na Listagem 2 é apresentado um exemplo de modal em sua forma mais simples.

Listagem 2. Estrutura básica de um modal com Bootstrap 

<div class="modal fade" id="modal-mensagem">
   <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>×</span></button>
                <h4 class="modal-title">Título da mensagem</h4>
            </div>
            <div class="modal-body">
                <p>Conteúdo da mensagem</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

Perceba, nas linhas 1, 2 e 3, que é necessário manter uma hierarquia básica de divs (modal, modal-dialog e modal-content) até chegarmos, de fato, ao conteúdo do modal. Já na linha 4, temos o título do modal, contido na div com classe modal-title, e na linha 8 temos o conteúdo da mensagem, dentro da div com classe modal-body. Por fim, o rodapé do modal (linha 11) é formado por uma div com classe modal-footer, dentro da qual adicionamos um botão para fechar a mensagem.

Nas linhas 5 e 12, por sua vez, temos dois botões, que possuem em comum o atributo data-dismiss=”modal”, que faz com que ao serem clicados, o modal seja fechado, sem a necessidade de utilizar linhas adicionais de JavaScript.

Para abrir esse modal, podemos adicionar um botão na página, conforme o código abaixo:

<button class="btn btn-primary" data-toggle="modal" data-target="#modal-mensagem"> Exibir mensagem </button>

Note a presença dos atributos data-toggle e data-target. O primeiro deles informa que esse botão deve abrir um modal ao ser clicado e o segundo aponta para a div que representa o modal a ser aberto (o id dessa div foi definido na linha 1 da Listagem 2).

Feito isso, ao abrir o documento HTML no browser e clicar no botão, teremos um resultado semelhante ao da Figura 1.

Figura 1. Modal básico com Bootstrap

Abrindo o modal via JavaScript

Os modais também podem ser exibidos via JavaScript, utilizando o método modal() do Bootstrap a partir da div que contém a estrutura vista na Listagem 2. Para exemplificar esse cenário, podemos criar outro botão, dessa vez sem os atributos data-toggle e data-target, mas com um id pelo qual ele será referenciado no código JavaScript, como abaixo:

<button class="btn btn-primary" id="btn-mensagem">Exibir modal via JavaScript</button>

Logo após, podemos adicionar o seguinte código na linha 11 da Listagem 1:


$("#btn-mensagem").click(function(){
    $("#modal-mensagem").modal();
});

Com essas instruções, estamos tratando o evento click do botão, selecionando via jQuery a div que contém o modal, e invocando, a partir dela, o método responsável por exibir a mensagem na tela.

Respeitando a estrutura HTML padrão dos modais e utilizando os atributos e métodos oferecidos pelo Bootstrap, é possível criar modais para diversas funcionalidades, desde as mais simples mensagens, até complexos formulários, bem como exibi-los de diferentes componentes e locais da página.

Curso relacionado: Como criar modais no Bootstrap

Artigos relacionados