Neste artigo, falaremos sobre o uso de modal Bootstrap. Bootstrap é um framework gratuito para o desenvolvimento de componentes de interface web front-end baseado em HTML, CSS e JavaScript. Com o intuito de melhorar a compreensão, trabalharemos com modelos-tutoriais. Para este exemplo, vamos usar a versão 4.3 do Bootstrap, a mais atual no momento da criação deste artigo.
Tópicos deste artigo:
- Código fonte de um modal Bootstrap
- O que é um modal?
- Para que serve um modal?
- Conectando a página ao Bootstrap
- Criando um modal Bootstrap básico
- Organizando o modal Bootstrap (cabeçalho, corpo e rodapé)
- Como aprofundar os seus conhecimentos em modal Bootstrap
Clique no botão abaixo para ver como funciona o nosso modal Bootstrap:
Código fonte de um modal Bootstrap
A seguir, o código do nosso botão e modal Boostrap por completo em sua versão final:
<html lang="pt-br">
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Modal em Bootstrap | HomeHost</title>
</head>
<body>
<!-- Botão que irá abrir o modal -->
<button type="button" class="btn btn-success btn-lg mt-2 ml-2" data-toggle="modal" data-target="#meuModal">Abrir Modal</button>
<!-- Modal -->
<div id="meuModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Conteúdo do modal-->
<div class="modal-content">
<!-- Cabeçalho do modal -->
<div class="modal-header">
<h4 class="modal-title">Título do modal</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Corpo do modal -->
<div class="modal-body">
<p>Conteúdo no corpo do modal.</p>
<p>Aqui você pode inserir todo o conteúdo necessário.</p>
</div>
<!-- Rodapé do modal-->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
<button type="button" class="btn btn-primary">Salvar Alterações</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html> O que é um modal?
Antes de tudo, modal é basicamente uma janela que abre sobre o conteúdo da página sem se desfazer dele. É utilizado com o intuito de passar algum aviso ou informação extra para dar suporte ao conteúdo da página principal, por isso não se desfaz deste mesmo conteúdo.
Para que serve um modal?
Imagine, por exemplo, que uma loja online (e-commerce) disponibiliza uma lista de produtos com nome, foto e uma descrição básica para cada produto. O site deve disponibilizar uma boa experiência ao usuário e ao mesmo tempo informação detalhada sobre o produto. Assim os desenvolvedores dessa loja online teriam basicamente duas opções (não fossem os modais):
1 – Incluir toda a informação sobre cada produto na página em que eles são listados. Aqui a página ficaria enorme e o visitante seria forçado a ver informações sobre produtos que não tem interesse e sequer cogita comprar. A poluição visual seria de alto impacto nesse modelo; ou
2 – Cada vez que o cliente quiser mais detalhes sobre um produto, será levado a outra página onde imagens, textos e scripts serão carregados. Neste modelo, o cliente que está pesquisando diversos produtos deverá navegar entre diversas páginas, o que consome mais tempo e banda (cada página aberta implica em uma grande quantidade de dados a serem carregados), prejudicando a experiência.
Para isso (além de outros usos) existe o modal Bootstrap. No nosso exemplo, cada vez que o cliente clicar em “Saiba mais” sobre um produto, a página em que se encontra simplesmente ficará por trás de um “pop-up” com novo conteúdo, fornecendo mais detalhes sobre o produto específico. Ao fechar o modal, o cliente simplesmente continua navegando na lista de produtos que não precisa ser carregada novamente.
Conectando a página ao Bootstrap
Para criar um modal em Bootstrap, antes precisamos incluir Bootstrap à nossa página. Caso não saiba como fazê-lo, pode simplesmente copiar o modelo padrão básico fornecido pelo próprio Bootstrap em seu site oficial (em inglês) clicando aqui.
Dessa maneira, iniciaremos incluindo um elemento <link> dentro do nosso <head> para conectar o CSS:
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Modal em Bootstrap | HomeHost</title>
</head> A seguir, algumas linhas serão necessárias antes do fechamento do <body>, aqui estaremos trazendo scripts utilizados pelo Bootstrap (o que permite alterar não apenas o estilo mas também manipular elementos na nossa página):
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body> Com isso, a nossa página estará configurada para utilizar Bootstrap e podemos agora criar elementos com propriedades e classes específicas como as que utilizaremos para o nosso modal Bootstrap.
Criando um modal Bootstrap básico
No corpo da página, logo após abrir a tag <body>, vamos inserir o código que criará o botão que servirá como gatilho (trigger) para o nosso modal.
<!-- Botão que irá abrir o modal -->
<button type="button" class="btn btn-success btn-lg mt-2 ml-2"
data-toggle="modal" data-target="#meuModal">Abrir Modal</button> Para que possamos utilizar um modal sem precisar escrever sequer uma linha de código JavaScript, utilizamos a propriedade data-toggle com o valor modal em algum elemento de controle (como, no nosso caso, um botão) e o Bootstrap irá cuidar dessa funcionalidade para nós.
Vamos utilizar também a propriedade data-target para indicar o “alvo” do nosso botão. Assim, o Bootstrap sabe que modal abrir e fechar para o botão específico. Da mesma forma, as classes que não mencionamos são para especificações no design, o que não é o foco deste tutorial. Nosso botão deverá estar assim:
A seguir, criamos um <div> com a classe modal e com o idmeuModal (podemos dar o id que quisermos contanto que seja o mesmo no data-target do botão) e dentro deste primeiro <div> um outro com a classe modal-dialog (sem a qual, não haverá o design de uma janela pop-up).
<!-- Modal -->
<div id="meuModal" class="modal fade" role="dialog">
<div class="modal-dialog">
[... estrutura básica do modal ...]
</div>
</div> Conforme podemos observar no código acima, ainda adicionamos uma classe fade ao modal. Isso serve apenas para aprimorar a experiência, dando um efeito ao surgimento do modal, que não irá aparecer de vez, mas abrir e fechar lentamente. Remover a classe fade não influenciará no funcionamento do modal, apenas na experiência do usuário (user experience).
Seguindo, criaremos dentro do <div> com a classe modal-dialog um outro <div> com a classe modal-content. Do inglês, content significa conteúdo, e é aqui que o conteúdo do nosso modal será incluído. O nosso código deverá ficar assim:
<!-- Conteúdo do modal-->
<div class="modal-content">
<h1>Olá, mundo!</h1>
</div> Agora, ao clicarmos no nosso botão para o modal Bootstrap, deveremos ver algo como:
Organizando o modal Bootstrap
Podemos concordar que o nosso modal Bootstrap não está o mais bonito de todos, não é mesmo? Por isso o Bootstrap foi criado, para facilitar o processo, neste caso, de criação do nosso modal. Veremos a seguir como melhor estruturar o nosso modal Bootstrap.
Assim como uma página contém cabeçalho, corpo e rodapé, um modal Bootstrap tem os mesmos elementos. Para isso, dentro do nosso <div> com classe modal-content, criaremos 3 outros elementos <div>, um com classe modal-header (cabeçalho), um com modal-body (corpo do modal) e o terceiro com a classe modal-footer (rodapé).
Cabeçalho do modal Boostrap
A título de exemplificação e para aprimorar o resultado final, vamos inserir um conteúdo inicial básico:
<!-- Cabeçalho do modal -->
<div class="modal-header">
<h4 class="modal-title">Título do modal</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div> Além disso, temos um botão com × que nada mais é do que o nome HTML para o símbolo de multiplicação, ou seja, o X que também utilizamos como símbolo de fechar. É necessário usar aqui a propriedade data-dismiss=”modal”, pois é o que indica que esse botão fechará o nosso modal Bootstrap.A classe modal-title no nosso elemento <h4> é uma classe de estilo que o Bootstrap usa para manipular os títulos dos modais. Remover essa classe não irá impedir o modal Bootstrap de funcionar, mas trará uma leve alteração no design.
Corpo e rodapé do modal Bootstrap
Continuando com os dois elementos <div> seguintes, teremos:
<!-- Corpo do modal -->
<div class="modal-body">
<p>Conteúdo no corpo do modal.</p>
<p>Aqui você pode inserir todo o conteúdo necessário.</p>
</div>
<!-- Rodapé do modal-->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
<button type="button" class="btn btn-primary">Salvar Alterações</button>
</div> Cada <div> que criamos aqui pode conter uma enorme quantidade de conteúdo. Só para exemplificar, adicionamos dois parágrafos no corpo do nosso modal Bootstrap. Para aprender mais sobre criação de sites e outros temas web, visite nossa seção de tutoriais.
Com o fim de criar um design básico bastante limpo e bonito, inserimos dois botões no rodapé do nosso modal Bootstrap. Em suma, as classes btn-primary e btn-danger são apenas classes básicas de estilo no Bootstrap. Para testar outros estilos, sugerimos que veja a documentação Bootstrap (em inglês).
Agora, ao clicarmos no nosso botão, teremos uma janela com cabeçalho, corpo e rodapé:
Aprofundando seus conhecimentos em modal Bootstrap
Com a finalidade de tornar o processo de criação mais fácil, Bootstrap fornece uma enorme quantidade de opções de design e características no uso de modal. Uma vez que a nossa proposta é oferecer um tutorial básico, sugerimos visitar a documentação oficial do Bootstrap para aprofundar seus conhecimentos (e testar novas opções) em modal Bootstrap. Além disso, para aprender mais sobre hospedagem, design, desenvolvimento e outros temas web, visite nossa página de tutoriais.
E lembre-se: para que o mundo possa ver o seu modal Bootstrap, será necessário hospedar a sua página na internet. Na HomeHost temos as melhores opções para clientes de todos os tamanhos. Verifique nossos planos de hospedagem.
