Ventana modal Bootstrap centrada verticalmente

181

Me gustaría centrar mi modal en la ventana gráfica (centro) Intenté agregar algunas propiedades css

 .modal { position: fixed; top:50%; left:50%; }   

Estoy usando este ejemplo http://jsfiddle.net/rniemeyer/Wjjnd/

Lo intenté

$("#MyModal").modal('show').css(
    {
        'margin-top': function () {
            return -($(this).height() / 2);
        },
        'margin-left': function () {
            return -($(this).width() / 2);
        }
    })
usuario2613813
fuente
Intenta anular .modal.fade.intambién
haim770
Pruebe con esto: github.com/jschr/bootstrap-modal
John Magnolia
3
Pruebe esto zerosixthree.se/… Yo uso: .modal.fade.in {top: 50%; transformar: traducirY (-50%); }
jowan sebastian
Solución de flexbox agregada (la translateY(-50%)que hace que la parte superior del modal sea inaccesible cuando el contenido modal es más alto que la altura del dispositivo).
tao
A partir de bootstrap 4 modal-dialog-centre se agregó que esto ya no es necesario. Por favor revise esa respuesta a continuación.
jcaruso

Respuestas:

258

Esto hace el trabajo: http://jsfiddle.net/sRmLV/1140/

Utiliza un helper-div y algunos css personalizados. No se requiere javascript ni jQuery.

HTML (basado en el código de demostración de Bootstrap )

<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="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>

                    </button>
                     <h4 class="modal-title" id="myModalLabel">Modal title</h4>

                </div>
                <div class="modal-body">...</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>
        </div>
    </div>
</div>

CSS

.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}
RNobel
fuente
Con esta solución, debido a la altura: 100%; y ancho: 100%; no puede cerrar los modales haciendo clic fuera de los modales. ¿Se te ocurre una solución para este @Rens de Nobel?
pcatre
1
Ok, esta solución parece funcionar muy bien (excepto que me impide cerrar los modales haciendo clic fuera de ellos). Pero de alguna manera hace que algunas de mis pruebas e2e con transportador fallen (y no puedo encontrar la razón por la cual, no parece que sea un error en esto). De todos modos, voy a volver a la respuesta de JavaScript para no perder más tiempo en esto. Pero como dije, esto parece funcionar bien, solo advierte a las personas que realizan pruebas de e2e con transportador para que tengan cuidado.
pcatre
3
@pcatre, gracias por el consejo! He actualizado el código con una solución para esto. Configuración de eventos de puntero: ninguno; en las clases de alineación hace el truco. Probado en IE11, Latest Chrome y Firefox e iOS Safari.
RNobel
44
No estoy seguro de si esto se ha actualizado desde los comentarios de los usuarios que dicen que no funciona, al hacer clic en los elementos modales internos, pero esto está funcionando al 100% para mí a partir de ahora, utilizando el ejemplo en el violín anterior. Muchas gracias por su ayuda y todos los comentarios anteriores.
Michael G
2
A partir de bootstrap 4 modal-dialog-centre se agregó que esto ya no es necesario. Por favor revise esa respuesta a continuación.
jcaruso
94

Debido a que la respuesta de gpcola no funcionó para mí, edité un poco para que funcione ahora. Usé "margin-top" en lugar de transform. Además, uso el evento "show" en lugar de "show" porque después me dio un salto muy malo de posicionamiento (visible cuando tienes animaciones de arranque). Asegúrese de configurar la pantalla para "bloquear" antes de posicionar, de lo contrario $ dialog.height () será 0 y el modal no estará completamente centrado.

(function ($) {
    "use strict";
    function centerModal() {
        $(this).css('display', 'block');
        var $dialog  = $(this).find(".modal-dialog"),
        offset       = ($(window).height() - $dialog.height()) / 2,
        bottomMargin = parseInt($dialog.css('marginBottom'), 10);

        // Make sure you don't hide the top part of the modal w/ a negative margin if it's longer than the screen height, and keep the margin equal to the bottom margin of the modal
        if(offset < bottomMargin) offset = bottomMargin;
        $dialog.css("margin-top", offset);
    }

    $(document).on('show.bs.modal', '.modal', centerModal);
    $(window).on("resize", function () {
        $('.modal:visible').each(centerModal);
    });
}(jQuery));
Arany
fuente
66
Este es perfecto! Justo en lugar de $ (documento) .height () es correcto usar $ (ventana) .height () en la línea 4. Además, cambiaría la última línea a: $('.modal:visible').each(centerModal);
Denis Chmel
A mí me funciona perfectamente, gracias. cuando usamos este código, también debemos establecer el relleno superior e inferior del cuadro de diálogo modal en 0px, para centrarlo perfectamente.
mina morsali
Esto se rompe si el modal es más alto que la altura de la ventana. Así que agregué la siguiente línea justo antes de establecer el margen superior del cuadro de diálogo: if(offset < 0) offset = 0; ¡Estoy pegando todo el bloque en un caso de respuesta que no está claro!
jetlej
Agregué algunos cambios adicionales para mantener el margen superior igual al margen inferior del modal, en la respuesta a continuación
jetlej
Perfecto, faltaba $ (this) .css ('display', 'block'); todo el tiempo y pensé por qué la altura era 0.
Jānis Gruzis
81

Esto es lo que hice para mi aplicación. Si observa las siguientes clases en el archivo bootstrap.css .modal-dialog tiene un relleno predeterminado de 10px y pantalla @media y (min-width: 768px) .modal-dialog tiene un relleno superior establecido en 30px. Entonces, en mi archivo css personalizado, configuré mi relleno superior en un 15% para todas las pantallas sin especificar un ancho de pantalla multimedia. Espero que esto ayude.

.modal-dialog {
  padding-top: 15%;
}
usuario1279047
fuente
66
esto solo funciona para cajas pequeñas, y no funciona para cajas
grandes
Podrías postularte a modales pequeños:.modal-dialog.modal-sm { padding-top:15%; }
Dunc
61

La mejor manera que encontré para todos los navegadores HTML5:

body.modal-open .modal {
    display: flex !important;
    height: 100%;
} 

body.modal-open .modal .modal-dialog {
    margin: auto;
}
Taha Shahid
fuente
2
Me gustó esta solución, muy limpia. No estoy seguro acerca de las versiones de escritorio o anteriores de Safari, pero parece estar bien en iOS 8.
Nicolas Galler
1
Sí, estoy de acuerdo con @NicolasGaller. A mí también me funciona bien. Probé en Chrome y Firefox. Funciona bien.
Manjunath Reddy
2
Esta es una excelente mejora progresiva de css. No se requiere js y cualquier navegador que no sea compatible con flexbox obtendrá la ubicación modal de arranque por defecto.
Craig Harshbarger
Cerrar, pero se rompe al poder cerrar modales cuando hay más de uno en la página. Vea mi respuesta a continuación para corregir.
Robert McKee
1
Actualización: Agregar align-items: center;a body.modal-open .modalparece funcionar.
bernie
20
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="table">
        <div class="table-cell">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        ...
                    </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>
            </div>
        </div>
    </div>
</div>

// Estilos

.table {
 display: table;
 height:100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
usuario3389
fuente
3
Esta es la respuesta universal. No sé por qué nadie votó a favor.
Csaba Toth
3
Revisé al menos 4 entradas SO cada una con una docena de propuestas. Por cierto, a la edad de HTML5 esto debería estar integrado en la funcionalidad de algún marco al menos. En lugar de hacer malabarismos.
Csaba Toth
1
También tenga en cuenta: si dice ancho: 100% para el estilo de tabla, obtendrá un centrado horizontal (en caso de que el modal no esté desbordado).
Csaba Toth
1
La mejor respuesta con diferencia. Esto crea una barra de desplazamiento pero puede deshabilitarla haciendo .modal-open .modal {overflow-y: hidden; }
Christophe
14

El parámetro superior se anula en .modal.fade.in para forzar el valor establecido en su declaración personalizada, agregue la !importantpalabra clave después de top. Esto obliga al navegador a usar ese valor e ignorar cualquier otro valor para la palabra clave. Esto tiene el inconveniente de que no puede anular el valor en ningún otro lugar.

.modal {
    position: fixed;
    top: 50% !important;
    left: 50%;
}
Alexander Varwijk
fuente
Esto me impide cerrar el modal al hacer clic en el fondo sobre el modal.
Scott Simpson
13

A partir de Bootstrap 4, se agregó la siguiente clase para lograr esto sin JavaScript.

modal-dialog-centered

Puedes encontrar su documentación aquí .

Gracias vd por señalar que necesita agregar .modal-dialog-centrado a .modal-dialog para centrar verticalmente el modal.

jcaruso
fuente
1
Esta es la mejor respuesta para bootstrap 4.
broc.seib
agregando modal-dialog y modal-dialog-centrado tiene un mejor resultado
vd
1
@vd eso se entiende dada la documentación que dice "Agregar .modal-dialog-centrado a .modal-dialog para centrar verticalmente el modal". Actualizaré mi respuesta para reflejar eso también para aquellos que no entendieron eso.
jcaruso
12

esto funciona para mí perfectamente:

.modal {
text-align: center;
padding: 0!important;
}

.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
}

.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}

URL de demostración completa : https://codepen.io/dimbslmh/full/mKfCc

AmirHossein Manian
fuente
11

puedes usar:

.modal {
    position: fixed;
    top: 50% !important;
    left: 50%;
    transform: translate(-50%, -50%);
}

para centrarlo tanto vertical como horizontalmente.

Aryeh Armon
fuente
2
Este es el verdadero "cómo centrar algo" con CSS sin usar Flex. El hecho de que el contexto sea Bootstrap o modal debe ser irrelevante. Todas las demás respuestas son demasiado exageradas.
ESR
1
Con este método, si el modal es más alto que la altura de la pantalla del dispositivo, la parte superior del modal se vuelve inaccesible.
tao
11

Porque la mayor parte de la respuesta aquí no funcionó, o solo funcionó parcialmente:

body.modal-open .modal[style]:not([style='display: none;']) {
    display: flex !important;
    height: 100%;
} 

body.modal-open .modal[style]:not([style='display: none;']) .modal-dialog {
    margin: auto;
}

Debe usar el selector [estilo] para aplicar solo el estilo en el modal que está actualmente activo en lugar de todos los modales. .inhubiera sido genial, pero parece que se agrega solo después de que se completa la transición, que es demasiado tarde y hace algunas transiciones realmente malas. Afortunadamente, parece que bootstrap siempre aplica un atributo de estilo en el modal tal como está comenzando a mostrarse, por lo que esto es un poco extraño, pero funciona.

La :not([style='display: none;'])parte es una solución alternativa para arrancar, no eliminar correctamente el atributo de estilo y, en cambio, establecer la visualización de estilo en ninguno cuando cierra el cuadro de diálogo.

Robert McKee
fuente
Genial, gracias. En realidad, es lo único que funcionó en 2016.
AlexioVay
Han pasado 4 años. Sigue siendo útil ¡Gracias amigo!
Hassan Nomani
8

Puede lograr un centro de alineación vertical en Bootstrap 3 modal así:

.modal-vertical-centered {
  transform: translate(0, 50%) !important;
  -ms-transform: translate(0, 50%) !important; /* IE 9 */
  -webkit-transform: translate(0, 50%) !important; /* Safari and Chrome */
}

y agregue esta clase css al contenedor "modal-dialog"

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

Ejemplo de trabajo de jsFiddle: http://jsfiddle.net/U4NRx/

EGurelli
fuente
¿Cómo exactamente centra el diálogo verticalmente?
gkalpak
Funciona muy bien en la mayoría de los lugares, pero no funciona en aplicaciones html5 envueltas inferiores a Android 4.4.
Josh
3
Mi modal estaba en la página con esto
Dorian,
1
¡SIP! Yo uso: .modal.fade.in {top: 50%; transformar: traducirY (-50%); }
jowan sebastian
Simplemente modifique del 50% al 15% y luego el cuadro de diálogo estará en el centro de la ventana. .modal-vertical-centrado {transform: translate (0, 15%)! important; -ms-transform: traducir (0, 15%)! importante; / * IE 9 / -webkit-transform: translate (0, 15%)! Important; / Safari y Chrome * /}
Haimei
8

¡La forma más limpia y sencilla de hacer esto es usar Flexbox! Lo siguiente alineará verticalmente un modal Bootstrap 3 en el centro de la pantalla y es mucho más limpio y simple que todas las otras soluciones publicadas aquí:

body.modal-open .modal.in {
  display: flex !important;
  align-items: center;
}

NOTA: Si bien esta es la solución más simple, es posible que no funcione para todos debido al soporte del navegador: http://caniuse.com/#feat=flexbox

Parece que (por lo general) IE se queda atrás. En mi caso, todos los productos que desarrollo para mí o para mis clientes son IE10 +. (No tiene sentido desde el punto de vista comercial invertir tiempo de desarrollo en versiones anteriores de IE cuando podría usarse para desarrollar realmente el producto y sacar el MVP más rápido). Esto ciertamente no es un lujo que todos tienen.

He visto sitios más grandes detectar si se admite o no flexbox y aplicar una clase al cuerpo de la página, pero ese nivel de ingeniería de front-end es bastante robusto, y aún necesitaría un respaldo.

Animaría a las personas a adoptar el futuro de la web. Flexbox es increíble y deberías comenzar a usarlo si puedes.

PD: este sitio realmente me ayudó a comprender flexbox como un todo y aplicarlo a cualquier caso de uso: http://flexboxfroggy.com/

EDITAR: en el caso de dos modales en una página, esto debería aplicarse a .modal.in

Greg Blass
fuente
De lo contrario, esto funciona bien, pero la animación de cierre no se ve bien.
user2061057
¿Debería poder realizar una animación con transiciones CSS3?
Greg Blass
7

Ventajas:

  • contenido modal accesible incluso cuando es más alto que el dispositivo
  • no usa display:table-cell(eso no es para diseños)
  • no requiere ninguna modificación al modo Bootstrap 3 predeterminado markup
  • el posicionamiento es puro CSS. El JS se agrega para cerrar el modal al hacer clic / tocar debajo y encima de él
  • Incluí el sin prefijo SCSSpara aquellos que usan gulpogrunt

Nota : Tengo la intención de mantener esta respuesta actualizada con las últimas especificaciones de Bootstrap 3. Para una solución Bootstrap 4, vea esta respuesta (por ahora son más o menos iguales, pero con el tiempo pueden diferir). Si encuentra algún error o problema, avíseme y lo actualizaré. Gracias.


Limpio, sin prefijo SCSS(para usar con gulp/ grunt):

.modal-dialog {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  min-height: calc(100vh - 60px);
  @media (max-width: 767px) {
    min-height: calc(100vh - 20px);
  }
}
tao
fuente
2
La mejor solución de la OMI.
Radmation
3

Sin embargo, otra solución CSS. No funciona para ventanas emergentes que son más grandes que el puerto de vista.

.modal-dialog {
    position: absolute;
    right: 0;
    left: 0;
    margin-top: 0;
    margin-bottom: 0; 
}
.modal.fade .modal-dialog {
    transition: top 0.4s ease-out;
    transform: translate(0, -50%);
    top: 0;
}
.modal.in .modal-dialog {
    transform: translate(0, -50%);
    top: 50%;
}

En .modal-dialogclase, anula la posición a absoluto (de relativo) y centra el contenidoright:0, left: 0

Al .modal.fade .modal-dialog , .modal.in .modal-dialogconfigurar la animación de transición en toplugar de traducir.

margin-topmueve la ventana emergente ligeramente por debajo del centro en caso de una ventana emergente pequeña y en caso de ventanas emergentes largas, el modal está atascado con el encabezado. Por lo tantomargin-top:0, margin-bottom:0

Necesito refinarlo aún más.

pravin
fuente
3

Para aquellos que usan bootstrap angular-ui, pueden agregar las siguientes clases según la información anterior:

Nota: No se necesitan otros cambios y resolverá todos los modales.

// The 3 below classes have been placed to make the modal vertically centered
.modal-open .modal{
    display:table !important;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}

.modal-dialog{
    display: table-cell;
    vertical-align: middle;
    pointer-events: none;
}

.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}
Jyotirmoy Pan
fuente
3

No es necesario para nosotros javascript. Boostrap modal agrega clase .in cuando aparece. Simplemente modifique esta combinación de clase con modalclassName.fade.in con flex css y ya está.

agregue este CSS para centrar su modal vertical y horizontalmente.

.modal.fade.in {
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.modal.fade.in .modal-dialog {
    width: 100%;
}
Ninguno
fuente
2

Mi elección, solo un poco de CSS: (NO funciona en IE8)

.modal.fade .modal-dialog {
    transform: translate(-50%, -80%);
}

.modal.in .modal-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0px;
}

Puedes jugar con la primera regla para cambiar cómo aparece el modal.

Usando: Bootstrap 3.3.4

John Bernardsson
fuente
2

Simplemente agregue el siguiente CSS a su existente, funciona bien para mí

.modal {
  text-align: center;
}
@media screen and (min-width: 768px) {
    .modal:before {
      display: inline-block;
      vertical-align: middle;
      content: " ";
      height: 100%;
    }
}
.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}
Shankar Prakash G
fuente
2

Basado en la respuesta de Arany , pero también contabilizando el desplazamiento de la página.

(function($) {
    "use strict";
    function positionModals(e) {
        var $this = $(this).css('display', 'block'),
            $window = $(window),
            $dialog = $this.find('.modal-dialog'),
            offset = ($window.height() - $window.scrollTop() - $dialog.height()) / 2,
            marginBottom = parseInt($dialog.css('margin-bottom'), 10);

        $dialog.css('margin-top', offset < marginBottom ? marginBottom : offset);
    }

    $(document).on('show.bs.modal', '.modal', positionModals);

    $(window).on('resize', function(e) {
        $('.modal:visible').each(positionModals);
    });
}(jQuery));
Mathieu
fuente
2

Creo que esta es una solución CSS pura un poco más limpia que la solución de Rens de Nobel. Además, esto no impide cerrar el diálogo haciendo clic fuera de él.

http://plnkr.co/edit/JCGVZQ?p=preview

Simplemente agregue alguna clase de CSS al contenedor DIV con la clase .modal-dialog para obtener una mayor especificidad que el CSS de bootstraps, por ejemplo, centrado.

HTML

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog centered modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Y haga que este contenedor .modal-dialog.centered esté fijo y posicionado correctamente.

CSS

.modal .modal-dialog.centered {
    position: fixed;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
}

O incluso más simple usando flexbox.

CSS

.modal {
    display: flex;
    align-items: center;
    justify-content: center;
}
Vit Koumar
fuente
Esta versión de flexbox no funciona como se esperaba. Al probar en el último Chrome (52.0.x), el diálogo .modal se centra correctamente, pero su interacción de contenido parece congelada en el lugar anterior (extrañamente). Sin embargo, puede intentar usar esta técnica directamente en .modal-dialog (no en .modal), y con algunas otras propiedades, parece funcionar. =)
giovannipds
2

.modal.in .modal-dialog {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Michael Oxborrow
fuente
1

Esto funciona en BS3, no probado en v2. Centra el modal verticalmente. Tenga en cuenta que hará la transición allí; si desea que solo aparezca en la posición, edite la transitionpropiedad CSS para.modal-dialog

centerModal = function() {
    var $dialog = $(this).find(".modal-dialog"),
        offset = ($(window).height() - $dialog.height()) / 2;

    // Center modal vertically in window
    $dialog.css({
        'transform': 'translateY(' + offset + 'px) !important',
    });
};

$('.modal').on('shown.bs.modal', centerModal);
$(window).on("resize", function() {
    $('.modal').each(centerModal);
});
gpcola
fuente
1
e(document).on('show.bs.modal', function () {
        if($winWidth < $(window).width()){
            $('body.modal-open,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',$(window).width()-$winWidth)
        }
    });
    e(document).on('hidden.bs.modal', function () {
        $('body,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',0)
    });
Tomtom
fuente
¿Podría aclarar cuál es la función 'e' en su respuesta?
Michael Butler
1

Esto toma la respuesta de Arany y lo hace funcionar si el modal es más alto que la altura de la pantalla:

function centerModal() {
    $(this).css('display', 'block');
    var $dialog = $(this).find(".modal-dialog");
    var offset = ($(window).height() - $dialog.height()) / 2;
    //Make sure you don't hide the top part of the modal w/ a negative margin if it's longer than the screen height, and keep the margin equal to the bottom margin of the modal
    var bottomMargin = $dialog.css('marginBottom');
    bottomMargin = parseInt(bottomMargin);
    if(offset < bottomMargin) offset = bottomMargin;
    $dialog.css("margin-top", offset);
}

$('.modal').on('show.bs.modal', centerModal);
$(window).on("resize", function () {
    $('.modal:visible').each(centerModal);
});
jetlej
fuente
Hola @jetlej, ¿por qué no editas la respuesta de Arany para incluir esto? Resuelve un gran error en su código.
pcatre
@pcatre - ¡No sabía que podía enviar ediciones! Gracias por señalarlo
jetlej
1

Para agregar centrado modal vertical a bootstrap modal.js, agregué esto al final de la Modal.prototype.showfunción:

var $modalDialog = $('.modal-dialog'),
        modalHeight = $modalDialog.height(),
        browserHeight = window.innerHeight;

    $modalDialog.css({'margin-top' : modalHeight >= browserHeight ? 0 : (browserHeight - modalHeight)/2});
andersra
fuente
No funcionará bien si el cuadro de diálogo cambia de altura una vez que se muestra, debido al cambio de tamaño de la página o las cosas dentro de él se expanden / colapsan.
Dirbaio
0

Para hacer que el modo Modal verifique el cuadro de diálogo Alinear todo medio.

/* Nota:

1.Aunque no necesite asignar un selector, encontrará todos los modales del documento y lo hará verticalmente en el medio

2.Para evitar el medio, un modo específico para ser el centro puede usar: no selector en el evento de clic

* /

 $( "[data-toggle='modal']" ).click(function(){
     var d_tar = $(this).attr('data-target'); 
     $(d_tar).show();   
     var modal_he = $(d_tar).find('.modal-dialog .modal-content').height(); 
     var win_height = $(window).height();
     var marr = win_height - modal_he;
     $('.modal-dialog').css('margin-top',marr/2);
  });

Desde Milan Pandya

usuario3690101
fuente
0

Use este script simple que centra los modales.

Si lo desea, puede establecer una clase personalizada (por ejemplo: .modal.modal-vcenter en lugar de .modal) para limitar la funcionalidad solo a algunos modales.

var modalVerticalCenterClass = ".modal";

function centerModals($element) {
    var $modals;
    if ($element.length) {
      $modals = $element;
    } else {
    $modals = $(modalVerticalCenterClass + ':visible');
}
$modals.each( function(i) {
    var $clone = $(this).clone().css('display', 'block').appendTo('body');
    var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
    top = top > 0 ? top : 0;
    $clone.remove();
    $(this).find('.modal-content').css("margin-top", top);
});
}
$(modalVerticalCenterClass).on('show.bs.modal', function(e) {
    centerModals($(this));
});
$(window).on('resize', centerModals);

Agregue también esta corrección CSS para el espacio horizontal del modal; mostramos el pergamino en los modales, Bootstrap oculta automáticamente los pergaminos del cuerpo:

/* scroll fixes */
.modal-open .modal {
  padding-left: 0px !important;
  padding-right: 0px !important;
  overflow-y: scroll;
}
Rakesh Vadnal
fuente
0

Otra respuesta de CSS a esta pregunta ...
Esta solución usa CSS solo para lograr el efecto deseado mientras mantiene la capacidad de cerrar el modal haciendo clic fuera de él. También le permite establecer .modal-contentmáximos de alto y ancho para que su ventana emergente no crezca más allá de la ventana gráfica. Un desplazamiento aparecerá automáticamente cuando el contenido crezca más allá del tamaño modal.

nota: se debe omitir el
Bootstrap recomendado .modal-dialog divpara que esto funcione correctamente (no parece romper nada). Probado en Chrome 51 e IE 11.

Código CSS:

.modal {
   height: 100%;
   width: 100%;
}

.modal-content {
   margin: 0 auto;
   max-height: 600px;
   max-width: 50%;
   overflow: auto;
   transform: translateY(-50%);
}

EDITAR: La .modal-dialogclase le permite elegir si un usuario puede o no cerrar el modal haciendo clic fuera del modal. La mayoría de los modales tienen un botón explícito de 'cerrar' o 'cancelar'. Tenga esto en cuenta cuando use esta solución alternativa.

dsanchez
fuente
0

La mejor solución para centralizar su modal con ancho y alto es, en css add y en modal, agregue esta 'centralizar' como clase.

.centralize{
   position:absolute;
   left:50%;
   top:50%;

   background-color:#fff;
   transform: translate(-50%, -50%);
   width: 40%; //specify watever u want
   height: 50%;
   }
yogesh mhetre
fuente
0

Centrado verticalmente Agregue .modal-dialog-centrado a .modal-dialog para centrar verticalmente el modal

Iniciar demo modal

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
Tayyab Roy
fuente