Source

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 .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:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

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" role="dialog">
  <div class="modal-dialog" role="document">
    <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 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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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>

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.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">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>

Centrado verticalmente

Engadir .modal-dialog-centereda .modal-dialogpara centrar verticalmente o modal.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">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>

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-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 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.relatedTargete 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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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">&times;</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)
})

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" role="dialog" 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 role="dialog"e aria-labelledby="...", facendo referencia ao título modal, a .modal, e role="document"ao .modal-dialogpropio. Ademais, pode dar unha descrición do seu diálogo modal con aria-describedbyon .modal.

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

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Uso

O complemento modal alterna o teu contido oculto baixo demanda, mediante atributos de datos ou JavaScript. Tamén se engade .modal-openao <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 myModalcunha ú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 staticun 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.modalou ).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.modalque 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.modalque 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 showse chama ao método de instancia. Se é causado por un clic, o elemento no que se fai clic está dispoñible como relatedTargetpropiedade 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 relatedTargetpropiedade do evento.
ocultar.bs.modal Este evento desenvólvese inmediatamente cando hidese 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). 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})