Modal

Utilice el complemento modal JavaScript de Bootstrap para agregar cuadros de diálogo a su sitio para cajas de luz, notificaciones de usuario o contenido completamente personalizado.

Cómo funciona

Antes de comenzar con el componente modal de Bootstrap, asegúrese de leer lo siguiente, ya que nuestras opciones de menú han cambiado recientemente.

Los modales se crean con HTML, CSS y JavaScript. Se colocan sobre todo lo demás en el documento y eliminan el desplazamiento <body> para que el contenido modal se desplace en su lugar.
Al hacer clic en el "telón de fondo" modal, se cerrará automáticamente el modal.
Bootstrap solo admite una ventana modal a la vez.Los modales anidados no son compatibles porque creemos que son experiencias de usuario deficientes.
Uso de modales position: fixed , que a veces puede ser un poco particular sobre su representación. Siempre que sea posible, coloque su HTML modal en una posición de nivel superior para evitar posibles interferencias de otros elementos. Es probable que tenga problemas al anidar un .modal dentro de otro elemento fijo.
Una vez más, debido a position: fixed , existen algunas advertencias sobre el uso de modales en dispositivos móviles. Consulte nuestros documentos de soporte del navegador para obtener más detalles.
Debido a cómo HTML5 define su semántica, el autofocus atributo HTML no tiene ningún efecto en los modales de Bootstrap. Para lograr el mismo efecto, use JavaScript personalizado:


  $('#myModal').on('shown.bs.modal', function () {
    $('#myInput').trigger('focus')
  })

El efecto de animación de este componente depende de la prefers-reduced-motion consulta de medios. Consulte la sección de movimiento reducido de nuestra documentación de accesibilidad .

Siga leyendo para ver demostraciones y pautas de uso.

Ejemplos

A continuación se muestra un ejemplo modal estático (lo que significa que position y display se han anulado). Se incluyen el encabezado modal, el cuerpo modal (requerido para padding ) y el pie de página modal (opcional). Le pedimos que incluya encabezados modales con acciones de descarte siempre que sea posible, o que proporcione otra acción de descarte 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">&times;</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 vivo

Alternar una demostración modal de trabajo haciendo clic en el botón de abajo. Se deslizará hacia abajo y aparecerá gradualmente desde la parte superior de la 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">&times;</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>

Telón de fondo estático

Cuando el fondo se establece en estático, el modal no se cerrará al hacer clic fuera de él. Haga clic en el botón de abajo para probarlo.


  <!-- 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">&times;</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>

Desplazamiento de contenido largo

Cuando los modales se vuelven demasiado largos para la ventana gráfica o el dispositivo del usuario, se desplazan independientemente de la página. Pruebe la demostración a continuación para ver lo que queremos decir.