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:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.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="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-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-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-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 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>
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-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-target
e . data-bs-toggle
Por 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.
<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" data-bs-dismiss="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" data-bs-dismiss="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-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.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>
Modo de tela cheia
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 de576px |
.modal-fullscreen-md-down |
Abaixo de768px |
.modal-fullscreen-lg-down |
Abaixo de992px |
.modal-fullscreen-xl-down |
Abaixo de1200px |
.modal-fullscreen-xxl-down |
Abaixo de1400px |
<!-- 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 $breakpoints
mapa 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-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-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>
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.modal
or hidden.bs.modal
ocorra).
myModal.toggle()
mostrar
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.show()
Além disso, você pode passar um elemento DOM como um argumento que pode ser recebido nos eventos modais (como a relatedTarget
propriedade).
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.modal
evento 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...
})