Modal
Use o complemento modal de JavaScript de Bootstrap para engadir diálogos ao seu sitio para caixas de luz, notificacións de usuarios ou contido completamente personalizado.
Cómo funciona
Antes de comezar co compoñente modal de Bootstrap, asegúrate de ler o seguinte xa que as nosas opcións de menú cambiaron recentemente.
- Os modais constrúense con HTML, CSS e JavaScript. Colócanse sobre todo o resto do documento e eliminan o desprazamento
<body>
para que o contido modal se desprace no seu lugar. - Facendo clic no "fondo" modal pecharase automaticamente o modal.
- Bootstrap só admite unha ventá modal á vez. Os modais anidados non son compatibles, xa que cremos que son experiencias de usuario deficientes.
- Os modais usan
position: fixed
, que ás veces pode ser un pouco particular sobre a súa representación. Sempre que sexa posible, coloque o seu HTML modal nunha posición de nivel superior para evitar posibles interferencias doutros elementos. É probable que teñas problemas ao aniñar un.modal
dentro doutro elemento fixo. - Unha vez máis, debido a
position: fixed
, hai algunhas advertencias co uso de modais en dispositivos móbiles. Consulte os nosos documentos de soporte do navegador para obter máis información. - Debido a como HTML5 define a súa semántica, o
autofocus
atributo HTML non ten ningún efecto nos modais de Bootstrap. Para conseguir o mesmo efecto, use algún JavaScript personalizado:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
prefers-reduced-motion
consulta multimedia. Consulta a
sección de movemento reducido da nosa documentación de accesibilidade .
Continúa lendo para ver demostracións e pautas de uso.
Exemplos
Compoñentes modais
A continuación móstrase un exemplo modal estáticoposition
(que significa que os seus e display
foron anulados). Inclúense a cabeceira modal, o corpo modal (obrigatorio para padding
) e o pé de páxina modal (opcional). Pedimos que inclúas cabeceiras modais con accións de exclusión sempre que sexa posible ou proporciones outra acción de exclusión 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>
Demo en directo
Alterna unha demostración modal de traballo facendo clic no botón de abaixo. Deslizarase cara abaixo e desaparecerá dende a parte superior da páxina.
<!-- 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>
Fondo estático
Cando o fondo está configurado como estático, o modal non se pechará ao facer clic fóra del. Fai clic no botón de abaixo para probalo.
<!-- 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>
Desprazando contido longo
Cando os modais se fan demasiado longos para a vista ou o dispositivo do usuario, desprázanse independentemente da propia páxina. Proba a demo a continuación para ver o que queremos dicir.
Tamén podes crear un modal desprazable que permita desprazar o corpo modal engadindo .modal-dialog-scrollable
a .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Centrado verticalmente
Engadir .modal-dialog-centered
a .modal-dialog
para centrar 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>
Suxestións e popovers
As informacións sobre ferramentas e popovers pódense colocar dentro dos modais segundo sexa necesario. Cando se pechan os modais, todas as suxestións sobre ferramentas e os menús emerxentes tamén se descartan 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 reixa
Utiliza o sistema de cuadrícula Bootstrap nun modal anidando .container-fluid
dentro do .modal-body
. Despois, use as clases normais do sistema de reixa como faría en calquera 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>
Contido modal variable
Tes un montón de botóns que activan o mesmo modal con contidos lixeiramente diferentes? Use event.relatedTarget
e atributos HTMLdata-*
(posiblemente a través de jQuery ) para variar o contido do modal dependendo do botón que se premeu.
A continuación móstrase unha demostración en directo seguida de exemplos de HTML e JavaScript. Para obter máis información, lea os documentos sobre eventos modais para obter máis información 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)
})
Cambiar animación
A $modal-fade-transform
variable determina o estado de transformación de .modal-dialog
antes da animación de fundido modal, a $modal-show-transform
variable determina a transformación de .modal-dialog
ao final da animación de fundido modal.
Se queres, por exemplo, unha animación de zoom, podes configurar $modal-fade-transform: scale(.8)
.
Eliminar animación
Para os modais que simplemente aparecen en lugar de desaparecer para ver, elimina a .fade
clase do teu marcado modal.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Alturas dinámicas
Se a altura dun modal cambia mentres está aberto, debes chamar $('#myModal').modal('handleUpdate')
para reaxustar a posición do modal no caso de que apareza unha barra de desprazamento.
Accesibilidade
Asegúrese de engadir aria-labelledby="..."
, facendo referencia ao título modal, a .modal
. Ademais, pode dar unha descrición do seu diálogo modal con aria-describedby
on .modal
. Teña en conta que non precisa engadir role="dialog"
xa que xa o engadimos mediante JavaScript.
Incorporando vídeos de YouTube
Incorporar vídeos de YouTube en modais require JavaScript adicional que non está en Bootstrap para deter automaticamente a reprodución e moito máis. Consulta esta útil publicación de Stack Overflow para obter máis información.
Tamaños opcionais
Os modais teñen tres tamaños opcionais, dispoñibles mediante clases de modificadores para colocalos nun .modal-dialog
. Estes tamaños aparecen en certos puntos de interrupción para evitar barras de desprazamento horizontais nas vistas máis estreitas.
Tamaño | Clase | Ancho máximo modal |
---|---|---|
Pequena | .modal-sm |
300px |
Por defecto | Ningún | 500px |
Grande | .modal-lg |
800px |
Extra grande | .modal-xl |
1140px |
A nosa clase modal predeterminada sen modificador constitúe o modal de tamaño "medio".
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Uso
O complemento modal alterna o teu contido oculto baixo demanda, mediante atributos de datos ou JavaScript. Tamén se engade .modal-open
ao <body>
comportamento de desprazamento predeterminado para anular e xera unha .modal-backdrop
área de clic para descartar os modais mostrados ao facer clic fóra do modal.
A través de atributos de datos
Activa un modal sen escribir JavaScript. Establécese data-toggle="modal"
nun elemento do controlador, como un botón, xunto cun data-target="#foo"
ou href="#foo"
para seleccionar un modal específico para alternar.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
Vía JavaScript
Chame a un modal con id myModal
cunha única liña de JavaScript:
$('#myModal').modal(options)
Opcións
As opcións pódense pasar a través de atributos de datos ou JavaScript. Para os atributos de datos, engada o nome da opción a data-
, como en data-backdrop=""
.
Nome | Tipo | Por defecto | Descrición |
---|---|---|---|
pano de fondo | booleano ou a cadea'static' |
verdade | Inclúe un elemento de fondo modal. Alternativamente, especifique static un fondo que non peche o modal ao facer clic. |
teclado | booleano | verdade | Pecha o modal cando se preme a tecla Esc |
foco | booleano | verdade | Pon o foco no modal cando se inicializa. |
mostrar | booleano | verdade | Mostra o modal cando se inicializa. |
Métodos
Métodos asíncronos e transicións
Todos os métodos da API son asíncronos e inician unha transición . Volven ao interlocutor en canto se inicia a transición pero antes de que remate . Ademais, ignorarase unha chamada de método nun compoñente en transición .
Consulte a nosa documentación de JavaScript para obter máis información .
.modal(options)
Activa o teu contido como modal. Acepta opcións opcionais object
.
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
Alterna manualmente un modal. Volve ao interlocutor antes de que o modal se amosase ou ocultase (é dicir, antes de que se produza o evento shown.bs.modal
ou ).hidden.bs.modal
$('#myModal').modal('toggle')
.modal('show')
Abre manualmente un modal. Volve ao interlocutor antes de que se amosara o modal (é dicir, antes de shown.bs.modal
que ocorra o evento).
$('#myModal').modal('show')
.modal('hide')
Oculta manualmente un modal. Volve ao interlocutor antes de que se ocultase o modal (é dicir, antes de hidden.bs.modal
que se produza o evento).
$('#myModal').modal('hide')
.modal('handleUpdate')
Reaxusta manualmente a posición do modal se a altura dun modal cambia mentres está aberto (é dicir, no caso de que apareza unha barra de desprazamento).
$('#myModal').modal('handleUpdate')
.modal('dispose')
Destrúe o modal dun elemento.
Eventos
A clase modal de Bootstrap expón algúns eventos para conectarse á funcionalidade modal. Todos os eventos modais desenvólvense no propio modal (é dicir, no <div class="modal">
).
Tipo de evento | Descrición |
---|---|
mostrar.bs.modal | Este evento desenvólvese inmediatamente cando show se chama ao método de instancia. Se é causado por un clic, o elemento no que se fai clic está dispoñible como relatedTarget propiedade do evento. |
mostrado.bs.modal | Este evento desenvólvese cando o modal se fixo visible para o usuario (esperará a que se completen as transicións CSS). Se é causado por un clic, o elemento no que se fai clic está dispoñible como relatedTarget propiedade do evento. |
ocultar.bs.modal | Este evento desenvólvese inmediatamente cando hide se chamou ao método de instancia. |
oculto.bs.modal | Este evento desenvólvese cando o modal rematou de ocultarse ao usuario (esperará a que se completen as transicións CSS). |
ocultarPrevented.bs.modal | Este evento desenvólvese cando se mostra o modal, o seu telón de fondo está static e se realiza un clic fóra do modal ou se preme a tecla de escape coa opción do teclado ou data-keyboard se configura como false . |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})