Source

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')
})

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" role="dialog">
  <div class="modal-dialog" role="document">
    <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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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>

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.

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

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">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>

Centralizado verticalmente

Adicione .modal-dialog-centereda .modal-dialogpara centralizar verticalmente o modal.

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

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">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>

Dicas de ferramentas e popovers

Dicas de ferramentas e popovers podem ser colocados dentro de modais conforme necessário. Quando os modais são fechados, quaisquer dicas de ferramentas e popovers também são descartados automaticamente.

<div class="modal-body">
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
  <hr>
  <h5>Tooltips in a modal</h5>
  <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

Usando a grade

Utilize o sistema de grade do Bootstrap em um modal aninhando -se .container-fluidno arquivo .modal-body. Em seguida, use as classes normais do sistema de grade como faria em qualquer outro lugar.

<div class="modal-body">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
      <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-sm-9">
        Level 1: .col-sm-9
        <div class="row">
          <div class="col-8 col-sm-6">
            Level 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6">
            Level 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Conteúdo modal variável

Tem um monte de botões que acionam o mesmo modal com conteúdos ligeiramente diferentes? Use event.relatedTargete atributos HTMLdata-* (possivelmente via jQuery ) para variar o conteúdo do modal dependendo de qual botão foi clicado.

Abaixo está uma demonstração ao vivo seguida por um exemplo de HTML e JavaScript. Para obter mais informações, leia os documentos de eventos modais para obter detalhes sobre relatedTarget.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Remover animação

Para modais que simplesmente aparecem em vez de aparecer gradualmente, remova a .fadeclasse de sua marcação modal.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
  ...
</div>

Alturas dinâmicas

Se a altura de um modal mudar enquanto ele estiver aberto, você deve chamar $('#myModal').modal('handleUpdate')para reajustar a posição do modal caso apareça uma barra de rolagem.

Acessibilidade

Certifique-se de adicionar role="dialog"e aria-labelledby="...", referenciando o título modal, para .modale role="document"para o .modal-dialogpróprio. Além disso, você pode fornecer uma descrição de sua caixa de diálogo modal com aria-describedbyon .modal.

Incorporando vídeos do YouTube

A incorporação de vídeos do YouTube em modais requer JavaScript adicional que não está no Bootstrap para interromper automaticamente a reprodução e muito mais. Veja esta postagem útil do Stack Overflow para obter mais informações.

Tamanhos opcionais

Os modais têm dois tamanhos opcionais, disponíveis por meio de classes modificadoras para serem colocadas em um arquivo .modal-dialog. Esses tamanhos entram em ação em determinados pontos de interrupção para evitar barras de rolagem horizontais em viewports mais estreitas.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Uso

O plug-in modal alterna seu conteúdo oculto sob demanda, por meio de atributos de dados ou JavaScript. Ele também adiciona .modal-openao <body>comportamento de rolagem padrão para substituir e gera um .modal-backdroppara fornecer uma área de clique para dispensar os modais mostrados ao clicar fora do modal.

Por atributos de dados

Ative um modal sem escrever JavaScript. Definido data-toggle="modal"em um elemento do controlador, como um botão, junto com um data-target="#foo"ou href="#foo"para direcionar um modal específico para alternar.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Por JavaScript

Chame um modal com id myModalcom uma única linha de JavaScript:

$('#myModal').modal(options)

Opções

As opções podem ser passadas por meio de atributos de dados ou JavaScript. Para atributos de dados, anexe o nome da opção a data-, como em data-backdrop="".

Nome Modelo Predefinição Descrição
pano de fundo booleano ou a string'static' verdadeiro Inclui um elemento de pano de fundo modal. Como alternativa, especifique staticum pano de fundo que não feche o modal ao clicar.
teclado boleano verdadeiro Fecha o modal quando a tecla Escape é pressionada
foco boleano verdadeiro Coloca o foco no modal quando inicializado.
mostrar boleano verdadeiro Mostra o modal quando inicializado.

Métodos

Métodos e transições assíncronas

Todos os métodos de API são assíncronos e iniciam uma transição . Eles retornam ao chamador assim que a transição é iniciada, mas antes que ela termine . Além disso, uma chamada de método em um componente de transição será ignorada .

Consulte nossa documentação JavaScript para obter mais informações.

.modal(options)

Ativa seu conteúdo como um modal. Aceita opções opcionais object.

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

Alterna manualmente um modal. Retorna ao chamador antes que o modal tenha sido mostrado ou ocultado (ou seja, antes que o evento shown.bs.modalor hidden.bs.modalocorra).

$('#myModal').modal('toggle')

.modal('show')

Abre manualmente um modal. Retorna ao chamador antes que o modal seja realmente mostrado (ou seja, antes que o shown.bs.modalevento ocorra).

$('#myModal').modal('show')

.modal('hide')

Oculta manualmente um modal. Retorna ao chamador antes que o modal tenha sido realmente oculto (ou seja, antes que o hidden.bs.modalevento ocorra).

$('#myModal').modal('hide')

.modal('handleUpdate')

Reajuste manualmente a posição do modal se a altura de um modal mudar enquanto estiver aberto (ou seja, no caso de uma barra de rolagem aparecer).

$('#myModal').modal('handleUpdate')

.modal('dispose')

Destrói o modal de um elemento.

Eventos

A classe modal do Bootstrap expõe alguns eventos para conexão com a funcionalidade modal. Todos os eventos modais são disparados no próprio modal (ou seja, no <div class="modal">).

Tipo de evento Descrição
show.bs.modal Este evento é acionado imediatamente quando o showmétodo de instância é chamado. Se causado por um clique, o elemento clicado fica disponível como relatedTargetpropriedade do evento.
mostrado.bs.modal Este evento é acionado quando o modal se torna visível para o usuário (aguardará a conclusão das transições CSS). Se causado por um clique, o elemento clicado fica disponível como relatedTargetpropriedade do evento.
hide.bs.modal Este evento é acionado imediatamente quando o hidemétodo de instância é chamado.
oculto.bs.modal Este evento é acionado quando o modal termina de ser ocultado do usuário (aguardará a conclusão das transições CSS). 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})