Centrar verticalmente una ventana modal de Boostrap

0 Compartir

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">&times;</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.

Acerca de
Últimas entradas

Orlando José-Rivera

Fundador de SimplicityTree | Web developer | Autor | Entrepreneur

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.

Últimas entradas de Orlando José-Rivera (ver todo)

TypeScript vs. JavaScript: ¿Cuál es mejor para tus proyectos? - octubre 31, 2024
Optimización de imágenes: clave para un diseño web eficiente - septiembre 28, 2024
Objetos en JavaScript - septiembre 21, 2024

Deja una respuesta Cancelar la respuesta