Modal Bootstrap 5

Modais

O componente Modal é um diálogo/painel pop-up, exibido na parte superior da página atual:

Como criar um modal

A seguir, é apresentado como criar um modal básico:

Exemplo

<!-- Botão para abrir o modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Abrir modal
</button>
<!-- Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Título do modal -->
      <div class="modal-header">
        <h4 class="modal-title">Título do Modal</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <!-- Corpo do modal -->
      <div class="modal-body">
        Corpo do modal ..
      </div>
      <!-- Rodapé do modal -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>

Experimente pessoalmente

para adicionar animação

Por favor, use .fade A classe adiciona efeito de entrada e saída suave ao abrir e fechar o modal:

Exemplo

<!-- Modal desvanecendo -->
<div class="modal fade"></div>
<!-- Modal sem animação -->
<div class="modal"></div>

Experimente pessoalmente

Tamanho do Modal

ao adicionar para modal pequeno .modal-sm classe (largura máxima 300px) para modal grande .modal-lg classe (largura máxima 800px) ou adicione para modal ultra grande .modal-xl para alterar o tamanho do modal (largura máxima 1140 pixels). O tamanho máximo padrão é de 500 pixels.

Por favor, insira .modal-dialog Adicione a classe e o tamanho juntos a <div> Elemento:

Modal Pequeno

<div class="modal-dialog modal-sm">

Experimente pessoalmente

Modal Grande

<div class="modal-dialog modal-lg">

Experimente pessoalmente

Modal Extra Grande

<div class="modal-dialog modal-xl">

Experimente pessoalmente

Por padrão, o tamanho do modal é "medium" (largura máxima de 500px).

Modal de tela cheia

Se você deseja que o modal ocupe toda a largura e altura da página, use .modal-fullscreen Classe:

Exemplo

<div class="modal-dialog modal-fullscreen">

Experimente pessoalmente

Modal de tela cheia responsivo

Você também pode usar .modal-fullscreen-*-* Classe controla quando o modal deve ser exibido em tela cheia:

Classe Descrição Exemplo
.modal-fullscreen-sm-down Tela cheia abaixo de 576px Experimente pessoalmente
.modal-fullscreen-md-down Tela cheia abaixo de 768px Experimente pessoalmente
.modal-fullscreen-lg-down Tela cheia abaixo de 992px Experimente pessoalmente
.modal-fullscreen-xl-down Tela cheia abaixo de 1200px Experimente pessoalmente
.modal-fullscreen-xxl-down Tela cheia abaixo de 1400px Experimente pessoalmente

Modal centralizado

Ao usar .modal-dialog-centric Classe, centraliza modal vertical e horizontalmente dentro da página:

Exemplo

<div class="modal-dialog modal-dialog-centered">

Experimente pessoalmente

Modal de rolagem

Quando há muito conteúdo no modal, uma barra de rolagem é adicionada à página. Veja os exemplos abaixo para entender:

Exemplo

<div class="modal-dialog">

Experimente pessoalmente

Mas, ao usar .modal-dialog-scrollable Adicionar a .modal-dialog Pode ser rolado apenas dentro do modal, não na página em si:

Exemplo

<div class="modal-dialog modal-dialog-scrollable">

Experimente pessoalmente