Modal

Use o plug-in modal JavaScript do Bootstrap para adicionar diálogos ao seu site para lightboxes, notificações do usuário ou conteúdo totalmente personalizado.

Como funciona

Antes de começar com o componente modal do Bootstrap, certifique-se de ler o seguinte, pois nossas opções de menu foram alteradas recentemente.

Os modais são construídos com HTML, CSS e JavaScript. Eles são posicionados sobre todo o resto no documento e removem a rolagem do <body>para que o conteúdo modal seja rolado.
Clicar no modal “backdrop” fechará automaticamente o modal.
Bootstrap suporta apenas uma janela modal por vez. Os modais aninhados não são compatíveis, pois acreditamos que sejam experiências de usuário ruins.
Os modais usam position: fixed, que às vezes pode ser um pouco particular sobre sua renderização. Sempre que possível, coloque seu HTML modal em uma posição de nível superior para evitar possíveis interferências de outros elementos. Você provavelmente terá problemas ao aninhar um .modaldentro de outro elemento fixo.
Mais uma vez, devido a position: fixed, existem algumas ressalvas com o uso de modais em dispositivos móveis. Consulte nossos documentos de suporte do navegador para obter detalhes.
Devido à forma como o HTML5 define sua semântica, o autofocusatributo HTML não tem efeito nos modais do Bootstrap. Para obter o mesmo efeito, use algum JavaScript personalizado:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

O efeito de animação deste componente depende da prefers-reduced-motionconsulta de mídia. Consulte a seção de movimento reduzido de nossa documentação de acessibilidade .

Continue lendo para demonstrações e diretrizes de uso.

Exemplos

Abaixo está um exemplo modal estáticoposition (significando que e displayforam substituídos). Estão incluídos o cabeçalho modal, o corpo modal (obrigatório para padding) e o rodapé modal (opcional). Pedimos que você inclua cabeçalhos modais com ações de dispensa sempre que possível ou forneça outra ação de dispensa explícita.

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Demonstração ao vivo

Alterne uma demonstração modal de trabalho clicando no botão abaixo. Ele deslizará para baixo e desaparecerá do topo da página.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Pano de fundo estático

Quando o pano de fundo é definido como estático, o modal não será fechado ao clicar fora dele. Clique no botão abaixo para experimentar.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

Rolagem de conteúdo longo

Quando os modais se tornam muito longos para a janela de visualização ou dispositivo do usuário, eles rolam independentemente da própria página. Experimente a demonstração abaixo para ver o que queremos dizer.