Por defecto, las ventanas modales de Boostrap se posicionan en la parte superior de la ventana del navegador. Pero podemos cambiar este comportamiento y hacer, por ejemplo, que se muestren alineados verticalmente hacia el centro.
Vamos a ver un ejemplo básico en el cual se despliega un cuadro de dialogo centrado verticalmente.
Primero creamos nuestro contenido HTML con las clases predefinidas de Boostrap:
<button type="button" class="btn btn-lg btn-primary m-5" data-toggle="modal" data-target="#ventanaModal">Pulsar aquí</button>
<!-- Modal -->
<div class="modal fade" id="ventanaModal" tabindex="-1" role="dialog" aria-labelledby="ventanaModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ventanaModalLabel">Mensaje de confirmación</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>¿Deseas guardar los cambios realizados?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Guardar cambios</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
</div>
</div>
</div>
</div>
Lo siguiente será escribir código JavaScript para alinear verticalmente hacia el centro la ventana modal.
$(document).ready(function(){
function alignModal(){
var modalDialog = $(this).find(".modal-dialog");
modalDialog.css("margin-top", Math.max(0, ($(window).height() - modalDialog.height()) / 2));
}
$(".modal").on("shown.bs.modal", alignModal);
// Align modal when user resize the window
$(window).on("resize", function(){
$(".modal:visible").each(alignModal);
});
});
La función alignModal() aplica un margen superior al <div> que contiene la clase .modal-dialog. El valor de este margen se obtiene al calcular la altura del cuadro de dialogo de la ventana modal menos la altura de la ventana del navegador, y luego el resultado se divide entre 2. Gracias a esto nos aseguramos que, independientemente del tamaño de la ventana del navegador, el cuadro de dialogo siempre estará en el centro de la página.
Código completo:
See the Pen Centrar verticalmente una ventana modal de Boostrap by simplicitytree (@simplicitytree) on CodePen.0
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- Cascada CSS - agosto 24, 2023
- El objeto Math - agosto 23, 2023
- Diferencia entre null y undefined en JavaScript - agosto 16, 2023