GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

Ventana Modal en BOOTSTRAP

El componente modal es una ventana de cuadro de diálogo / emergente que aparece en la parte
superior de la página actual:

Cómo crear una Ventana Modal

El siguiente ejemplo muestra cómo crear un modal básico:

<!—Botón para abrir modal -->

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
abrir modal
</button>

<!-- El Modal -->

<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">

<!—Encabezado del Modal -->

<div class="modal-header">
<h4 class="modal-title">Encabezado del Modal</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>

<!—Cuerpo del Modal -->

<div class="modal-body">
Cuerpo del Modal..
</div>

<!—Pie del Modal -->

<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
</div>

</div>
</div>
</div>

Ver: Código 172.html

Añadir animación
Utilice la clase .fade para añadir un efecto de desvanecimiento al abrir y cerrar el modal:
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

<!—efecto Fading al modal -->

<div class="modal fade"></div>

<!-- Modal sin animación -->

<div class="modal"></div>

Ver: Código 173.html

Tamaño de la Ventana Modal

Cambiar el tamaño de la ventana modal mediante la adición de la clase .modal-sm para los
modales pequeños, la clase .modal-lg para los modales grandes, o .modal-xl para los modales
extra grandes.
Agregue la clase de tamaño al elemento <div> con la clase .modal-dialog:

Modal Pequeño
<div class="modal-dialog modal-sm">

Ver: Código 174.html

Modal Grande
<div class="modal-dialog modal-lg">

Ver: Código 175.html

Modal Extre Grande

<div class="modal-dialog modal-xl">

Ver: Código 176.html

Por defecto las ventanas modales son de tamaño medio.

Ventana Modal Centrada

Para centrar la ventana modal vertical y horizontalmente dentro de la página, usaremos la clase
.modal-dialog-centered :

<div class="modal-dialog modal-dialog-centered">

Ver: Código 177.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Desplazamiento de la Ventana Modal

Para centrar la ventana modal vertical y horizontalmente dentro de la página, usaremos la clase
.modal-dialog-centered :

<div class="modal-dialog modal-dialog-centered">

Ver: Código 178.html