English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap4 Tutoriais Básicos

Bootstrap4 Janela Modais

O Modal é basicamente uma caixa de diálogo ou janela pop-up usada para fornecer informações importantes aos usuários ou para solicitar que o usuário tome ações necessárias antes de continuar. O modelo é amplamente usado para alertar os usuários sobre timeouts de sessão, ou para receber sua confirmação final antes de executar qualquer operação crítica (por exemplo, salvar ou excluir dados importantes).

Você pode criar fácilmente caixas de diálogo inteligentes e flexíveis usando o plug-in de caixa modal do Bootstrap.

A caixa modal (Modal) é uma janela subsequente sobreposta ao formulário pai. Normalmente, o objetivo é exibir conteúdo de uma fonte separada, permitindo alguma interação sem sair do formulário pai. A janela subsequente pode fornecer informações e interação, etc.

Como criar uma caixa modal

O exemplo a seguir resume a estrutura básica de um modelo simples com título, corpo da mensagem e pé de página contendo botões de ação do usuário. O exemplo a seguir cria um efeito de caixa modal simples :

!DOCTYPE　html>
<html>
<head>
　　<title>Exemplo Bootstrap　</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Exemplo de caixa modal</h2>
　　!--　Botão: usado para abrir a caixa modal　-->
　　<button　type="button"　class="btn　btn-primary"　data-toggle="modal"　data-target="#myModal">
　　　　Abrir caixa modal
　　</button>
　　　
　　!--　Janela Modais　-->
　　<div　class="modal　fade"　id="myModal">
　　　　<div　class="modal-dialog">
　　　　　　<div　class="modal-content">
　　　
　　　　　　　　!--　Cabeça da Janela Modais　-->
　　　　　　　　<div　class="modal-header">
　　　　　　　　　　<h4　class="modal-title">Cabeça da Janela Modais</h4>
　　　　　　　　　　<button　type="button"　class="close"　data-dismiss="modal">×</button>
　　　　　　　　</div>
　　　
　　　　　　　　!--　Corpo da Janela Modais　-->
　　　　　　　　<div　class="modal-body>
　　　　　　　　　　Conteúdo da Janela Modais...
　　　　　　　　</div>
　　　
　　　　　　　　!--　Baixo da Janela Modais　-->
　　　　　　　　<div　class="modal-footer">
　　　　　　　　　　<button　type="button"　class="btn　btn-secondary"　data-dismiss="modal">Fechar</button>
　　　　　　　　</div>
　　　
　　　　　　</div>
　　　　</div>
　　</div>
　　
</div>
</body>
</html>
Teste e veja ‹/›

O efeito após a execução é o seguinte:

Tamanho da caixa modal

Podemos adicionar .modal-sm classe para criar uma caixa modal pequena, .modal-lg pode criar uma caixa modal grande.

As classes de tamanho ficam dentro do elemento <div> da classe .modal-após a classe dialog :

!DOCTYPE　html>
<html>
<head>
　　<title>Exemplo Bootstrap　</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Exemplo de caixa modal</h2>
　　!--　Botão: usado para abrir a caixa modal　-->
　　<button　type="button"　class="btn　btn-primary"　data-toggle="modal"　data-target="#myModal">
　　　　Abrir caixa modal
　　</button>
　　　
　　!--　Janela Modais　-->
　　<div　class="modal　fade"　id="myModal">
　　　　<div　class="modal-dialog　modal-sm">
　　　　　　<div　class="modal-content">
　　　
　　　　　　　　!--　Cabeça da Janela Modais　-->
　　　　　　　　<div　class="modal-header">
　　　　　　　　　　<h4　class="modal-title">Cabeça da Janela Modais</h4>
　　　　　　　　　　<button　type="button"　class="close"　data-dismiss="modal">×</button>
　　　　　　　　</div>
　　　
　　　　　　　　!--　Corpo da Janela Modais　-->
　　　　　　　　<div　class="modal-body>
　　　　　　　　　　Conteúdo da Janela Modais...
　　　　　　　　</div>
　　　
　　　　　　　　!--　Baixo da Janela Modais　-->
　　　　　　　　<div　class="modal-footer">
　　　　　　　　　　<button　type="button"　class="btn　btn-secondary"　data-dismiss="modal">Fechar</button>
　　　　　　　　</div>
　　　
　　　　　　</div>
　　　　</div>
　　</div>
　　
</div>
</body>
</html>
Teste e veja ‹/›

O efeito após a execução é o seguinte:

!DOCTYPE　html>
<html>
<head>
　　<title>Exemplo Bootstrap　</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Exemplo de caixa modal</h2>
　　!--　Botão: usado para abrir a caixa modal　-->
　　<button　type="button"　class="btn　btn-primary"　data-toggle="modal"　data-target="#myModal">
　　　　Abrir caixa modal
　　</button>
　　　
　　!--　Janela Modais　-->
　　<div　class="modal　fade"　id="myModal">
　　　　<div　class="modal-dialog　modal-lg">
　　　　　　<div　class="modal-content">
　　　
　　　　　　　　!--　Cabeça da Janela Modais　-->
　　　　　　　　<div　class="modal-header">
　　　　　　　　　　<h4　class="modal-title">Cabeça da Janela Modais</h4>
　　　　　　　　　　<button　type="button"　class="close"　data-dismiss="modal">×</button>
　　　　　　　　</div>
　　　
　　　　　　　　!--　Corpo da Janela Modais　-->
　　　　　　　　<div　class="modal-body>
　　　　　　　　　　Conteúdo da Janela Modais...
　　　　　　　　</div>
　　　
　　　　　　　　!--　Baixo da Janela Modais　-->
　　　　　　　　<div　class="modal-footer">
　　　　　　　　　　<button　type="button"　class="btn　btn-secondary"　data-dismiss="modal">Fechar</button>
　　　　　　　　</div>
　　　
　　　　　　</div>
　　　　</div>
　　</div>
　　
</div>
</body>
</html>
Teste e veja ‹/›

O efeito após a execução é o seguinte:

Bootstrap4 Caixa de MensagemBootstrap4 Carrossel