Bootstrap - Complemento modal

Un modal es una ventana secundaria que se coloca en capas sobre su ventana principal. Normalmente, el propósito es mostrar contenido de una fuente separada que puede tener alguna interacción sin salir de la ventana principal. Las ventanas secundarias pueden proporcionar información, interacción o más.

Si desea incluir esta funcionalidad de complemento individualmente, necesitará modal.js. De lo contrario, como se menciona en el capítulo Descripción general de los complementos de Bootstrap , puede incluir bootstrap.js o el bootstrap.min.js minificado .

Uso

Puede alternar el contenido oculto del complemento modal:

  • Via data attributes - Establecer atributo data-toggle = "modal" en un elemento del controlador, como un botón o enlace, junto con un data-target = "#identifier" o href = "#identifier" para apuntar a un modal específico (con el id = "identificador") para alternar.

  • Via JavaScript - Usando esta técnica, puede llamar a un modal con id = "identifier" con una sola línea de JavaScript -

$('#identifier').modal(options)

Ejemplo

Un ejemplo de ventana modal estática se muestra en el siguiente ejemplo:

<h2>Example of creating Modals with Twitter Bootstrap</h2>

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

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
                  &times;
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Add some text here
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
  
</div><!-- /.modal -->

Details of the preceding code −

  • Para invocar la ventana modal, necesita tener algún tipo de disparador. Puede utilizar un botón o un enlace. Aquí hemos utilizado un botón.

  • Si observa el código anterior, verá que en la etiqueta <button>, el data-target = "#myModal"es el destino del modal que desea cargar en la página. Este código le permite crear múltiples modales en la página y luego tener diferentes disparadores para cada uno de ellos. Ahora, para que quede claro, no carga varios modales al mismo tiempo, pero puede crear muchos en las páginas para que se carguen en diferentes momentos.

  • Hay dos clases a tener en cuenta en el modal:

    • El primero es .modal, que simplemente identifica el contenido del <div> como modal.

    • Y segundo es el .fadeclase. Cuando se alterna el modal, hará que el contenido aparezca y desaparezca gradualmente.

  • aria-labelledby = "myModalLabel", el atributo hace referencia al título modal.

  • El atributo aria-hidden = "true" se utiliza para mantener la ventana modal invisible hasta que se activa un disparador (como un clic en el botón asociado).

  • <div class = "modal-header">, modal-header es la clase para definir el estilo del encabezado de la ventana modal.

  • class = "close", es un cierre de clase CSS que establece el estilo del botón Cerrar de la ventana modal.

  • data-dismiss = "modal", es un atributo de datos HTML5 personalizado. Aquí se usa para cerrar la ventana modal.

  • class = "modal-body", es una clase CSS de Bootstrap CSS para establecer el estilo del cuerpo de la ventana modal.

  • class = "modal-footer", es una clase CSS de Bootstrap CSS para establecer el estilo del pie de página de la ventana modal.

  • data-toggle = "modal", La alternancia de datos de atributos de datos personalizados HTML5 se utiliza para abrir la ventana modal.

Opciones

Hay ciertas opciones que se pueden pasar a través de atributos de datos o JavaScript para personalizar la apariencia de la ventana modal. La siguiente tabla enumera las opciones:

Nombre de opción Tipo / Valor predeterminado Nombre del atributo de datos Descripción
fondo booleano o la cadena 'estática' Predeterminado: verdadero telón de fondo de datos Especifique estático para un fondo, si no desea que el modal se cierre cuando el usuario hace clic fuera del modal.
teclado booleano Predeterminado: verdadero teclado de datos Cierra el modal cuando se presiona la tecla Escape; establecer en falso para deshabilitar.
show booleano Predeterminado: verdadero muestra de datos Muestra el modal cuando se inicializa.
remoto ruta Predeterminado: falso remoto de datos

Usando el método jQuery .load , inyecte contenido en el cuerpo modal. Si se agrega un href con una URL válida, cargará ese contenido. A continuación se muestra un ejemplo de esto:

<a data-toggle = "modal" href = "remote.html" data-target = "#modal">Click me</a>

Métodos

Aquí hay algunos métodos útiles que se pueden usar con modal ().

Método Descripción Ejemplo
Options - .modal (opciones) Activa tu contenido como modal. Acepta un objeto de opciones opcionales. 
$('#identifier').modal({
   keyboard: false
})
Toggle - .modal ('alternar') Cambia manualmente un modal. 
$('#identifier').modal('toggle')
Show - .modal ('mostrar') Abre manualmente un modal. 
$('#identifier').modal('show')
Hide - .modal ('ocultar') Oculta manualmente un modal. 
$('#identifier').modal('hide')

Ejemplo

El siguiente ejemplo demuestra el uso de métodos:

<h2>Example of using methods of Modal Plugin</h2>

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

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
               ×
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Press ESC button to exit.
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
   
</div><!-- /.modal -->

<script>
   $(function () { $('#myModal').modal({
      keyboard: true
   })});
</script>

Simplemente haga clic en el botón Esc y se cerrará la ventana modal.

Eventos

La siguiente tabla enumera los eventos para trabajar con modal. Estos eventos pueden usarse para conectarse a la función.

Evento Descripción Ejemplo
show.bs.modal Se activa después de que se llama al método show. 
$('#identifier').on('show.bs.modal', function () {
   // do something…
})
mostrado.bs.modal Se activa cuando el modal se ha hecho visible para el usuario (esperará a que se completen las transiciones CSS). 
$('#identifier').on('shown.bs.modal', function () {
   // do something…
})
hide.bs.modal Se activa cuando se ha llamado al método de la instancia oculta. 
$('#identifier').on('hide.bs.modal', function () {
   // do something…
})
hidden.bs.modal Se activa cuando el modal ha terminado de ocultarse al usuario. 
$('#identifier').on('hidden.bs.modal', function () {
   // do something…
})

Ejemplo

El siguiente ejemplo demuestra el uso de eventos:

<h2>Example of using events of Modal Plugin</h2>

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

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
               ×
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Click on close button to check Event functionality.
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
   
</div><!-- /.modal -->

<script>
   $(function () { $('#myModal').modal('hide')})});
</script>

<script>
   $(function () { $('#myModal').on('hide.bs.modal', function () {
      alert('Hey, I heard you like modals...');})
   });
</script>

Como se ve en la pantalla anterior, si hace clic en el botón Cerrar, es decir, ocultar evento, se muestra un mensaje de alerta.