Modal
Utilitzeu el connector modal de JavaScript de Bootstrap per afegir diàlegs al vostre lloc per a caixes de llum, notificacions d'usuari o contingut completament personalitzat.
Com funciona
Abans de començar amb el component modal de Bootstrap, assegureu-vos de llegir el següent, ja que les nostres opcions de menú han canviat recentment.
- Els modals es creen amb HTML, CSS i JavaScript. Es col·loquen sobre tota la resta del document i eliminen el desplaçament de
<body>
manera que el contingut modal es desplaça. - Si feu clic al "teló de fons" modal, tancarà automàticament el modal.
- Bootstrap només admet una finestra modal alhora. No s'admeten els modalitats imbricades, ja que creiem que són experiències d'usuari deficients.
- Els modals utilitzen
position: fixed
, que de vegades pot ser una mica particular pel que fa a la seva representació. Sempre que sigui possible, col·loqueu el vostre HTML modal en una posició de primer nivell per evitar possibles interferències d'altres elements. És probable que tingueu problemes en niuar un.modal
dins d'un altre element fix. - Una vegada més, a causa de
position: fixed
, hi ha algunes advertències amb l'ús de modals en dispositius mòbils. Consulteu els nostres documents d'assistència per al navegador per obtenir més informació. - A causa de com HTML5 defineix la seva semàntica, l'
autofocus
atribut HTML no té cap efecte en els modals d'Bootstrap. Per aconseguir el mateix efecte, utilitzeu JavaScript personalitzat:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
prefers-reduced-motion
consulta de mitjans. Consulteu la
secció de moviment reduït de la nostra documentació d'accessibilitat .
Continueu llegint per obtenir demostracions i directrius d'ús.
Exemples
Components modals
A continuació es mostra un exemple modal estàticposition
(és a dir, el seu i display
s'han substituït). S'inclouen la capçalera modal, el cos modal (obligatori per a padding
) i el peu de pàgina modal (opcional). Us demanem que incloeu capçaleres modals amb accions d'ignoració sempre que sigui possible o proporcioneu una altra acció d'ignorar 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>
Demo en directe
Commuteu una demostració modal de treball fent clic al botó següent. Es lliscarà cap avall i s'esvaeix des de la part superior de la 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>
Teló de fons estàtic
Quan el fons s'estableix com a estàtic, el modal no es tancarà en fer clic fora d'ell. Feu clic al botó següent per provar-ho.
<!-- 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>
Desplaçament de contingut llarg
Quan els modals es fan massa llargs per a la finestra o el dispositiu de l'usuari, es desplacen independentment de la pròpia pàgina. Proveu la demostració a continuació per veure què volem dir.
També podeu crear un modal desplaçable que permeti desplaçar-vos pel cos del modal afegint .modal-dialog-scrollable
a .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Centrat verticalment
Afegiu .modal-dialog-centered
a .modal-dialog
per centrar verticalment el 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>
Consells d'eines i popovers
Els consells sobre eines i les finestres emergents es poden col·locar dins de modalitats segons sigui necessari. Quan es tanquen les modalitats, també es descarten automàticament qualsevol informació sobre eines i finestres emergents.
<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>
Utilitzant la graella
Utilitzeu el sistema de quadrícula Bootstrap dins d'un modal nidificant .container-fluid
dins del fitxer .modal-body
. A continuació, utilitzeu les classes normals del sistema de graella com ho faríeu en qualsevol altre lloc.
<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>
Contingut modal variable
Tens un munt de botons que activen tots el mateix modal amb continguts lleugerament diferents? Utilitzeu event.relatedTarget
i els atributs HTMLdata-bs-*
per variar el contingut del modal en funció del botó que s'hagi fet clic.
A continuació es mostra una demostració en directe seguida d'exemples d'HTML i JavaScript. Per obtenir més informació, llegiu els documents d'esdeveniments modals per obtenir més informació 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
})
Canvia entre modalitats
Canvia entre diversos modals amb una ubicació intel·ligent dels atributs data-bs-target
i . data-bs-toggle
Per exemple, podeu canviar un modal de restabliment de la contrasenya des d'un modal d'inici de sessió ja obert. Tingueu en compte que no es poden obrir diversos modals al mateix temps ; aquest mètode simplement alterna entre dos modals separats.
<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>
Canvia l'animació
La $modal-fade-transform
variable determina l'estat de transformació de .modal-dialog
abans de l'animació d'esvaïment modal, la $modal-show-transform
variable determina la transformació de .modal-dialog
al final de l'animació d'esvaïment modal.
Si voleu, per exemple, una animació amb zoom, podeu configurar $modal-fade-transform: scale(.8)
.
Elimina l'animació
Per als modals que simplement apareixen en lloc de desaparèixer per veure's, elimineu la .fade
classe del vostre marcatge modal.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Altures dinàmiques
Si l'alçada d'un modal canvia mentre està obert, hauríeu de trucar myModal.handleUpdate()
per reajustar la posició del modal en cas que aparegui una barra de desplaçament.
Accessibilitat
Assegureu-vos d'afegir aria-labelledby="..."
, fent referència al títol modal, a .modal
. A més, podeu donar una descripció del vostre diàleg modal amb aria-describedby
on .modal
. Tingueu en compte que no cal que l'afegiu role="dialog"
, ja que ja l'afegim mitjançant JavaScript.
Inserció de vídeos de YouTube
La inserció de vídeos de YouTube en modalitats requereix JavaScript addicional que no estigui a Bootstrap per aturar automàticament la reproducció i molt més. Consulteu aquesta útil publicació de Stack Overflow per obtenir més informació.
Mides opcionals
Els modals tenen tres mides opcionals, disponibles mitjançant classes modificadores per col·locar-los en un fitxer .modal-dialog
. Aquestes mides s'inicien en determinats punts d'interrupció per evitar barres de desplaçament horitzontals a les finestres més estretes.
Mida | Classe | Amplada màxima modal |
---|---|---|
Petit | .modal-sm |
300px |
Per defecte | Cap | 500px |
Gran | .modal-lg |
800px |
Extra gran | .modal-xl |
1140px |
La nostra classe modal per defecte sense modificador constitueix el modal de mida "mitjana".
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Modal de pantalla completa
Una altra substitució és l'opció d'aparèixer un modal que cobreixi la finestra gràfica de l'usuari, disponible mitjançant classes modificadores que es col·loquen en un fitxer .modal-dialog
.
Classe | Disponibilitat |
---|---|
.modal-fullscreen |
Sempre |
.modal-fullscreen-sm-down |
Baix576px |
.modal-fullscreen-md-down |
Baix768px |
.modal-fullscreen-lg-down |
Baix992px |
.modal-fullscreen-xl-down |
Baix1200px |
.modal-fullscreen-xxl-down |
Baix1400px |
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
Sass
Les variables
$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);
Bucle
Els mods de pantalla completa responsius es generen mitjançant el $breakpoints
mapa i un bucle a 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);
}
}
}
}
Ús
El connector modal alterna el contingut ocult a demanda, mitjançant atributs de dades o JavaScript. També anul·la el comportament de desplaçament predeterminat i genera un .modal-backdrop
per proporcionar una àrea de clic per descartar els modals mostrats quan es fa clic fora del modal.
Mitjançant atributs de dades
Activa un modal sense escriure JavaScript. Estableix data-bs-toggle="modal"
en un element del controlador, com un botó, juntament amb un data-bs-target="#foo"
o href="#foo"
per orientar un modal específic per alternar.
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
Mitjançant JavaScript
Creeu un modal amb una sola línia de JavaScript:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
Opcions
Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-bs-
, com a data-bs-backdrop=""
.
Nom | Tipus | Per defecte | Descripció |
---|---|---|---|
backdrop |
booleà o la cadena'static' |
true |
Inclou un element de fons modal. Alternativament, especifiqueu static un teló de fons que no tanqui el modal en fer clic. |
keyboard |
booleà | true |
Tanca el modal quan es prem la tecla d'escapament |
focus |
booleà | true |
Posa el focus en el modal quan s'inicialitza. |
Mètodes
Mètodes asíncrons i transicions
Tots els mètodes de l'API són asíncrons i comencen una transició . Tornen a la persona que truca tan bon punt s'inicia la transició però abans que acabi . A més, s'ignorarà una trucada de mètode en un component en transició .
Consulteu la nostra documentació de JavaScript per obtenir més informació .
Opcions de pas
Activa el teu contingut com a modal. Accepta opcions opcionals object
.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
alternar
Commuta manualment un modal. Torna a la persona que truca abans que el modal s'hagi mostrat o amagat (és a dir, abans que es produeixi l'esdeveniment shown.bs.modal
o ).hidden.bs.modal
myModal.toggle()
espectacle
Obre manualment un modal. Torna a la persona que truca abans que s'hagi mostrat realment el modal (és a dir, abans shown.bs.modal
que es produeixi l'esdeveniment).
myModal.show()
A més, podeu passar un element DOM com a argument que es pot rebre als esdeveniments modals (com a relatedTarget
propietat).
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
amagar
Amaga manualment un modal. Torna a la persona que truca abans que el modal s'hagi amagat (és a dir, abans hidden.bs.modal
que es produeixi l'esdeveniment).
myModal.hide()
handleUpdate
Reajusteu manualment la posició del modal si l'alçada d'un modal canvia mentre està obert (és a dir, en cas que aparegui una barra de desplaçament).
myModal.handleUpdate()
disposar
Destrueix el modal d'un element. (Elimina les dades emmagatzemades a l'element DOM)
myModal.dispose()
getInstance
Mètode estàtic que permet obtenir la instància modal associada a un element DOM
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
getOrCreateInstance
Mètode estàtic que us permet obtenir la instància modal associada a un element DOM o crear-ne una de nova en cas que no s'hagi inicialitzat
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
Esdeveniments
La classe modal de Bootstrap exposa alguns esdeveniments per connectar-se a la funcionalitat modal. Tots els esdeveniments modals es desencadenen al propi modal (és a dir, al <div class="modal">
).
Tipus d'esdeveniment | Descripció |
---|---|
show.bs.modal |
Aquest esdeveniment s'activa immediatament quan show es crida al mètode d'instància. Si és causat per un clic, l'element clicat està disponible com a relatedTarget propietat de l'esdeveniment. |
shown.bs.modal |
Aquest esdeveniment s'activa quan el modal s'ha fet visible per a l'usuari (esperarà que finalitzin les transicions CSS). Si és causat per un clic, l'element clicat està disponible com a relatedTarget propietat de l'esdeveniment. |
hide.bs.modal |
Aquest esdeveniment s'activa immediatament quan hide s'ha cridat el mètode d'instància. |
hidden.bs.modal |
Aquest esdeveniment s'activa quan el modal s'ha acabat d'ocultar a l'usuari (esperarà que finalitzin les transicions CSS). |
hidePrevented.bs.modal |
Aquest esdeveniment s'activa quan es mostra el modal, el seu teló de fons és static i es fa un clic fora del modal o es prem una tecla d'escapament amb l'opció del teclat o data-bs-keyboard s'estableix a false . |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})