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

01 <!DOCTYPE html>
02 <html lang="en">
03 <head>
04     <meta charset="UTF-8">
05     <title>Document</title>
06     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
07 </head>
08 <body>
09
10     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
11     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
12     <script>
13     $(function(){
14         //código para exibir os modais
15     });
16     </script>     
17 </body>
18 </html> 
Listagem 1. Estrutura da página para uso de modais

Linha 6: Referência ao arquivo CSS do Bootstrap;

Linha 7: Referência à biblioteca jQuery;

Linha 8: Referência ao arquivo JavaScript do Bootstrap;

Linhas 9 a 13: Script onde estarão as chamadas aos métodos do Bootstrap e jQuery para exibir os modais. Os trechos de código JavaScript que veremos a partir daqui devem ser inseridos no lugar da linha 11.

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.

01 <div class="modal fade" id="modal-mensagem">
02    <div class="modal-dialog">
03         <div class="modal-content">
04             <div class="modal-header">
05                 <button type="button" class="close" data-dismiss="modal"><span>×</span></button>
06                 <h4 class="modal-title">Título da mensagem</h4>
07             </div>
08             <div class="modal-body">
09                 <p>Conteúdo da mensagem</p>
10             </div>
11             <div class="modal-footer">
12                 <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
13             </div>
14         </div>
15     </div>
16 </div>
Listagem 2. Estrutura básica de um modal com Bootstrap

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.

Modal básico
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.

Clique aqui e veja mais exemplos criados pela comunidade DevMedia :)