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