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.

Nesta página

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:

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
  myInput.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="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-bs-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-bs-toggle="modal" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-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-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-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.

Você também pode criar um modal rolável que permite rolar o corpo do modal adicionando .modal-dialog-scrollablea .modal-dialog.

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

Centralizado verticalmente

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

<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
  ...
</div>

<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  ...
</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-bs-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 ms-auto">.col-md-4 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
      <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ms-auto">.col-md-6 .ms-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>

Tem um monte de botões que acionam o mesmo modal com conteúdos ligeiramente diferentes? Use event.relatedTargete atributos HTMLdata-bs-* 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-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<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">New message</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <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-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
  // Button that triggered the modal
  var button = event.relatedTarget
  // Extract info from data-bs-* attributes
  var recipient = button.getAttribute('data-bs-whatever')
  // If necessary, you could initiate an AJAX request here
  // and then do the updating in a callback.
  //
  // Update the modal's content.
  var modalTitle = exampleModal.querySelector('.modal-title')
  var modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = 'New message to ' + recipient
  modalBodyInput.value = recipient
})

Alternar entre modais

Alterne entre vários modais com um posicionamento inteligente dos atributos data-bs-targete . data-bs-togglePor exemplo, você pode alternar um modal de redefinição de senha de dentro de um modal de login já aberto. Observe que vários modais não podem ser abertos ao mesmo tempo - esse método simplesmente alterna entre dois modais separados.

Abrir primeiro modal

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Hide this modal and show the first with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>
      </div>
    </div>
  </div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>

Alterar animação

A $modal-fade-transformvariável determina o estado de transformação de .modal-dialogantes da animação de fade-in modal, a $modal-show-transformvariável determina a transformação de .modal-dialogno final da animação de fade-in modal.

Se você quiser, por exemplo, uma animação com zoom, você pode definir $modal-fade-transform: scale(.8).

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" aria-labelledby="..." aria-hidden="true">
  ...
</div>

Alturas dinâmicas

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

Acessibilidade

Certifique-se de adicionar aria-labelledby="...", referenciando o título modal, a .modal. Além disso, você pode fornecer uma descrição de sua caixa de diálogo modal com aria-describedbyon .modal. Observe que você não precisa adicionar role="dialog", pois já o adicionamos via JavaScript.

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 três 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.

Tamanho	Classe	Largura máxima modal
Pequena	`.modal-sm`	`300px`
Predefinição	Nenhum	`500px`
Grande	`.modal-lg`	`800px`
Extra grande	`.modal-xl`	`1140px`

Nosso modal padrão sem classe modificadora constitui o modal de tamanho “médio”.

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

Outra substituição é a opção de exibir um modal que cobre a janela de visualização do usuário, disponível por meio de classes modificadoras que são colocadas em um arquivo .modal-dialog.

Classe	Disponibilidade
`.modal-fullscreen`	Sempre
`.modal-fullscreen-sm-down`	Abaixo de`576px`
`.modal-fullscreen-md-down`	Abaixo de`768px`
`.modal-fullscreen-lg-down`	Abaixo de`992px`
`.modal-fullscreen-xl-down`	Abaixo de`1200px`
`.modal-fullscreen-xxl-down`	Abaixo de`1400px`

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

Sass

Variáveis

$modal-inner-padding:               $spacer;

$modal-footer-margin-between:       .5rem;

$modal-dialog-margin:               .5rem;
$modal-dialog-margin-y-sm-up:       1.75rem;

$modal-title-line-height:           $line-height-base;

$modal-content-color:               null;
$modal-content-bg:                  $white;
$modal-content-border-color:        rgba($black, .2);
$modal-content-border-width:        $border-width;
$modal-content-border-radius:       $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       $box-shadow-sm;
$modal-content-box-shadow-sm-up:    $box-shadow;

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;
$modal-header-border-color:         $border-color;
$modal-footer-border-color:         $modal-header-border-color;
$modal-header-border-width:         $modal-content-border-width;
$modal-footer-border-width:         $modal-header-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

$modal-fade-transform:              translate(0, -50px);
$modal-show-transform:              none;
$modal-transition:                  transform .3s ease-out;
$modal-scale-transform:             scale(1.02);

Ciclo

Os modais de tela cheia responsivos são gerados por meio do $breakpointsmapa e um loop em scss/_modal.scss.

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  $postfix: if($infix != "", $infix + "-down", "");

  @include media-breakpoint-down($breakpoint) {
    .modal-fullscreen#{$postfix} {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;

      .modal-content {
        height: 100%;
        border: 0;
        @include border-radius(0);
      }

      .modal-header {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }

      .modal-footer {
        @include border-radius(0);
      }
    }
  }
}

Uso

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

Por atributos de dados

Alternar

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

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

Dispensar

A demissão pode ser feita com o dataatributo em um botão dentro do modal conforme demonstrado abaixo:

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

ou em um botão fora do modal usando o data-bs-targetconforme demonstrado abaixo:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>

Embora ambas as formas de dispensar um modal sejam suportadas, lembre-se de que dispensar de fora de um modal não corresponde ao padrão de design de diálogo modal WAI-ARIA . Faça isso por sua conta e risco.

Por JavaScript

Crie um modal com uma única linha de JavaScript:

var myModal = new bootstrap.Modal(document.getElementById('myModal'), 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-bs-, como em data-bs-backdrop="".

Nome	Modelo	Predefinição	Descrição
`backdrop`	booleano ou a string`'static'`	`true`	Inclui um elemento de pano de fundo modal. Como alternativa, especifique `static`um pano de fundo que não feche o modal ao clicar.
`keyboard`	boleano	`true`	Fecha o modal quando a tecla Escape é pressionada
`focus`	boleano	`true`	Coloca o foco no 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 .

Opções de passagem

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

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
})

alternar

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.toggle()

mostrar

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

myModal.show()

Além disso, você pode passar um elemento DOM como um argumento que pode ser recebido nos eventos modais (como a relatedTargetpropriedade).

var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)

ocultar

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.hide()

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.handleUpdate()

dispor

Destrói o modal de um elemento. (Remove os dados armazenados no elemento DOM)

myModal.dispose()

getInstance

Método estático que permite obter a instância modal associada a um elemento DOM

var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance

getOrCreateInstance

Método estático que permite obter a instância modal associada a um elemento DOM ou criar uma nova caso não tenha sido inicializada

var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance

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 `show`método de instância é chamado. Se causado por um clique, o elemento clicado fica disponível como `relatedTarget`propriedade do evento.
`shown.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 `relatedTarget`propriedade do evento.
`hide.bs.modal`	Este evento é acionado imediatamente quando o `hide`método de instância é chamado.
`hidden.bs.modal`	Este evento é acionado quando o modal termina de ser ocultado do usuário (aguardará a conclusão das transições CSS).
`hidePrevented.bs.modal`	Este evento é acionado quando o modal é mostrado, seu pano de fundo é `static`e um clique fora do modal ou uma tecla de escape é realizada com a opção de teclado ou `data-bs-keyboard`definida como `false`.

var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})