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.

Nesta páxina

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 .modaldentro 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 autofocusatributo HTML non ten ningún efecto nos modais de Bootstrap. Para conseguir o mesmo efecto, use algún JavaScript personalizado:

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

myModal.addEventListener('shown.bs.modal', function () {
  myInput.focus()
})

O efecto de animación deste compoñente depende da prefers-reduced-motionconsulta 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

A continuación móstrase un exemplo modal estáticoposition (que significa que os seus e displayforon 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="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 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-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>

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-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>

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-scrollablea .modal-dialog.

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

Centrado verticalmente

Engadir .modal-dialog-centereda .modal-dialogpara 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-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 reixa

Utiliza o sistema de cuadrícula Bootstrap nun modal anidando .container-fluiddentro 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 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>

Tes un montón de botóns que activan o mesmo modal con contidos lixeiramente diferentes? Use event.relatedTargete atributos HTMLdata-bs-* para variar o contido do modal dependendo do botón no 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-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
})

Alterna entre modais

Alterna entre varios modais cunha colocación intelixente dos atributos data-bs-targete . data-bs-togglePor exemplo, podes cambiar un modal de restablecemento de contrasinal desde un modal de inicio de sesión xa aberto. Teña en conta que non se poden abrir varios modais ao mesmo tempo ; este método simplemente alterna entre dous 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>

Cambiar animación

A $modal-fade-transformvariable determina o estado de transformación de .modal-dialogantes da animación de fundido modal, a $modal-show-transformvariable determina a transformación de .modal-dialogao 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 .fadeclase 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.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-describedbyon .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>

Outra substitución é a opción de mostrar un modal que cobre a vista do usuario, dispoñible a través de clases modificadoras que se colocan nun .modal-dialog.

Clase	Dispoñibilidade
`.modal-fullscreen`	Sempre
`.modal-fullscreen-sm-down`	Abaixo`576px`
`.modal-fullscreen-md-down`	Abaixo`768px`
`.modal-fullscreen-lg-down`	Abaixo`992px`
`.modal-fullscreen-xl-down`	Abaixo`1200px`
`.modal-fullscreen-xxl-down`	Abaixo`1400px`

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

Sass

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

Os modais de pantalla completa sensibles xéranse a través do $breakpointsmapa e dun bucle en 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 complemento modal alterna o teu contido oculto baixo demanda, mediante atributos de datos ou JavaScript. Tamén anula o comportamento de desprazamento predeterminado e xera un .modal-backdroppara proporcionar unha área de clic para descartar os modais mostrados cando se fai clic fóra do modal.

A través de atributos de datos

Alterna

Activa un modal sen escribir JavaScript. Establécese data-bs-toggle="modal"nun elemento do controlador, como un botón, xunto cun data-bs-target="#foo"ou href="#foo"para seleccionar un modal específico para alternar.

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

Descartar

O despedimento pódese conseguir co dataatributo nun botón dentro do modal como se demostra a continuación:

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

ou nun botón fóra do modal usando o data-bs-targetcomo se demostra a continuación:

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

Aínda que se admiten ambas as dúas formas de descartar un modal, ten en conta que excluír un modal desde fóra non coincide co patrón de deseño do diálogo modal WAI-ARIA . Fai isto baixo o teu propio risco.

Vía JavaScript

Crea un modal cunha única liña de JavaScript:

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

Nome	Tipo	Por defecto	Descrición
`backdrop`	booleano ou a cadea`'static'`	`true`	Inclúe un elemento de fondo modal. Alternativamente, especifique `static`un fondo que non peche o modal ao facer clic.
`keyboard`	booleano	`true`	Pecha o modal cando se preme a tecla Esc
`focus`	booleano	`true`	Pon o foco no 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 .

Opcións de paso

Activa o teu contido como modal. Acepta opcións opcionais object.

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

alternar

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.modalou ).hidden.bs.modal

myModal.toggle()

mostrar

Abre manualmente un modal. Volve ao interlocutor antes de que se amosara o modal (é dicir, antes de shown.bs.modalque ocorra o evento).

myModal.show()

Ademais, pode pasar un elemento DOM como argumento que se pode recibir nos eventos modais (como relatedTargetpropiedade).

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

ocultar

Oculta manualmente un modal. Volve ao interlocutor antes de que se ocultase o modal (é dicir, antes de hidden.bs.modalque se produza o evento).

myModal.hide()

manexar Actualización

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

dispor

Destrúe o modal dun elemento. (Elimina os datos almacenados no elemento DOM)

myModal.dispose()

getInstance

Método estático que permite obter a instancia modal asociada a un elemento DOM

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

getOrCreateInstance

Método estático que che permite obter a instancia modal asociada a un elemento DOM ou crear unha nova no caso de que non se inicializou

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

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
`show.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.
`shown.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.
`hide.bs.modal`	Este evento desenvólvese inmediatamente cando `hide`se chamou ao método de instancia.
`hidden.bs.modal`	Este evento desenvólvese cando o modal rematou de ocultarse ao usuario (esperará a que se completen as transicións CSS).
`hidePrevented.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-bs-keyboard`se configura como `false`.

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