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.modal
dentro 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
autofocus
atributo 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')
})
prefers-reduced-motion
consulta 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
Componentes modais
Abaixo está um exemplo modal estáticoposition
(significando que e display
foram 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">×</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">×</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">×</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.
Você também pode criar um modal rolável que permite rolar o corpo do modal adicionando .modal-dialog-scrollable
a .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Centralizado verticalmente
Adicione .modal-dialog-centered
a .modal-dialog
para 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-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-fluid
no 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.relatedTarget
e 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" 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="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</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)
})
Alterar animação
A $modal-fade-transform
variável determina o estado de transformação de .modal-dialog
antes da animação de fade-in modal, a $modal-show-transform
variável determina a transformação de .modal-dialog
no 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 .fade
classe 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').modal('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-describedby
on .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>
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-open
ao <body>
comportamento de rolagem padrão para substituir e gera um .modal-backdrop
para 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 myModal
com 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 static um 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.modal
or hidden.bs.modal
ocorra).
$('#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.modal
evento 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.modal
evento 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 show método de instância é chamado. Se causado por um clique, o elemento clicado fica disponível como relatedTarget propriedade 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 relatedTarget propriedade do evento. |
hide.bs.modal | Este evento é acionado imediatamente quando o hide mé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). |
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-keyboard definida como false . |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})