twitter-bootstrap
Diálogos modales

Observaciones

Uso básico de HTML

Un diálogo modal de Bootstrap es un componente Bootstrap que crea una ventana de diálogo modal que flota sobre el contenido a nivel de la página.

Aquí hay un ejemplo del uso básico de un diálogo modal de Bootstrap en HTML:

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Uso básico de Javascript e inicialización.

Los componentes del diálogo modal se pueden crear una instancia a través de jQuery con la función $('#myModal').modal(options) , donde $('#myModal') es una referencia de nivel superior al diálogo modal específico y las options son un objeto de Javascript que especifica Los atributos por defecto del diálogo modal.

El objeto de options permite que se definan múltiples propiedades, lo que afectará el comportamiento del diálogo modal. Estas propiedades se definen como tales:

• La propiedad de backdrop permite al usuario definir si desea que aparezca una superposición de fondo gris detrás del cuadro de diálogo modal. Se reconocen tanto los valores booleanos como la cadena "estática". Si se especifica "estático", el diálogo modal no se cerrará cuando un usuario haga clic en la superposición de fondo.
• La propiedad del keyboard permite al usuario definir si desea que el diálogo modal se cierre cuando se presiona la tecla Escape en el teclado.
• La propiedad show permite al usuario definir si desea que aparezca el diálogo modal cuando se inicializa el modal.

Aquí hay un ejemplo del uso básico de Javascript:

$('#carModal').modal({ backdrop: false, keyboard: true, show: false });

Al igual que con otros componentes de Bootstrap, las opciones modales también pueden especificarse en HTML a través de atributos de datos.