Bootstrap 3 centro de posición vertical modal


270

Esta es una pregunta de dos partes:

  1. ¿Cómo puede colocar el modal verticalmente en el centro cuando no conoce la altura exacta del modal?

  2. ¿Es posible tener el modal centrado y tener overflow: auto en el modal-body, pero solo si el modal excede la altura de la pantalla?

He intentado usar esto:

.modal-dialog {
  height: 80% !important;
  padding-top:10%;
}

.modal-content {
  height: 100% !important;
  overflow:visible;
}

.modal-body {
  height: 80%;
  overflow: auto;
}

Esto me da el resultado que necesito cuando el contenido es mucho más grande que el tamaño de pantalla vertical, pero para contenidos modales pequeños es prácticamente inutilizable.


1
@Heiken por alguna razón, esto me hace saltar hacia abajo en la pantalla, estoy usando cromo
Sven van den Boogaart

Respuestas:


374
.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;
}

Y ajuste un poco la clase .fade para asegurarse de que aparezca fuera del borde superior de la ventana, en lugar del centro


En realidad, estaba anulando esto por error, gracias por señalar que en realidad funciona detrás de escena.
Dorian

Esta es probablemente la mejor manera de centrarse verticalmente, no solo el modo de arranque, sino todo lo demás. css-tricks.com/centering-in-the-unknown
Mark S

44
Aclaro que esto no funciona muy bien en dispositivos móviles. Porque la definición ": después" tiene una altura del 100% y puede mover automáticamente el modal hacia abajo de la página. Acabo de resolver declarando .modal {display: flex! Importante;} .modal-dialog {margin: auto}. El 92.97% de las personas ya tienen soporte para usar esta propiedad CSS, sin embargo, para suporte general pueden usar JavaScript para establecer los márgenes.
Walter Chapilliquen - wZVanG

21
Absolutamente genial, pero recomendaría usarlo solo por encima de 768px y dejar la configuración predeterminada en el móvil. La posición superior es mejor para los modales cuando la altura de la pantalla es pequeña. También he ajustado una animación para que aparezca desde el centro, aquí el ejemplo de trabajo si alguien lo necesita: codepen.io/anon/pen/zGBpNq
bwitkowicz

Esta solución cambia la ventana modal a la derecha para 2px, causa: antes del elemento. Pero esto se puede resolver agregando el mismo código para: after
Cypher

146

1. ¿Cómo puede colocar el modal verticalmente en el centro cuando no conoce la altura exacta del modal?

Para centrar absolutamente el modo Bootstrap 3 sin declarar una altura, primero deberá sobrescribir el CSS de Bootstrap agregando esto a su hoja de estilo:

.modal-dialog-center { /* Edited classname 10/03/2014 */
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
}

Esto colocará la esquina superior izquierda de los cuadros de diálogo modales en el centro de la ventana.

Tenemos que agregar esta consulta de medios o el margen izquierdo modal es incorrecto en dispositivos pequeños:

@media (max-width: 767px) {
  .modal-dialog-center { /* Edited classname 10/03/2014 */
    width: 100%;
  }
} 

Ahora necesitaremos ajustar su posición con JavaScript. Para hacer eso, le damos al elemento un margen negativo superior e izquierdo igual a la mitad de su altura y anchura. En este ejemplo usaremos jQuery ya que está disponible con Bootstrap.

$('.modal').on('shown.bs.modal', function() {
    $(this).find('.modal-dialog').css({
        'margin-top': function () {
            return -($(this).outerHeight() / 2);
        },
        'margin-left': function () {
            return -($(this).outerWidth() / 2);
        }
    });
});

Actualización (01/10/2015):

Añadiendo la respuesta de Finik . Créditos para centrarse en lo desconocido .

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

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

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

Observe el margen negativo derecho? Esto elimina el espacio agregado por inline-block. Ese espacio hace que el modal salte al final de la página @media width <768px.

2. ¿Es posible tener el modal centrado y tener overflow: auto en el modal-body, pero solo si el modal excede la altura de la pantalla?

Esto es posible dando al cuerpo modal un desbordamiento-y: auto y una altura máxima. Esto requiere un poco más de trabajo para que funcione correctamente. Comience agregando esto a su hoja de estilo:

.modal-body {
    overflow-y: auto;
}
.modal-footer {
    margin-top: 0;
}

Usaremos jQuery nuevamente para obtener la altura de la ventana y establecer primero la altura máxima del contenido modal. Luego tenemos que establecer la altura máxima del cuerpo modal, restando el contenido modal con el encabezado modal y el pie de página modal:

$('.modal').on('shown.bs.modal', function() {
    var contentHeight = $(window).height() - 60;
    var headerHeight = $(this).find('.modal-header').outerHeight() || 2;
    var footerHeight = $(this).find('.modal-footer').outerHeight() || 2;

    $(this).find('.modal-content').css({
        'max-height': function () {
            return contentHeight;
        }
    });

    $(this).find('.modal-body').css({
        'max-height': function () {
            return (contentHeight - (headerHeight + footerHeight));
        }
    });

    $(this).find('.modal-dialog').css({
        'margin-top': function () {
            return -($(this).outerHeight() / 2);
        },
        'margin-left': function () {
            return -($(this).outerWidth() / 2);
        }
    });
});

Puede encontrar una demostración funcional aquí con Bootstrap 3.0.3: http://cdpn.io/GwvrJ EDIT: recomiendo usar la versión actualizada en su lugar para una solución más receptiva: http://cdpn.io/mKfCc

Actualización (30/11/2015):

function setModalMaxHeight(element) {
  this.$element     = $(element);  
  this.$content     = this.$element.find('.modal-content');
  var borderWidth   = this.$content.outerHeight() - this.$content.innerHeight();
  var dialogMargin  = $(window).width() < 768 ? 20 : 60;
  var contentHeight = $(window).height() - (dialogMargin + borderWidth);
  var headerHeight  = this.$element.find('.modal-header').outerHeight() || 0;
  var footerHeight  = this.$element.find('.modal-footer').outerHeight() || 0;
  var maxHeight     = contentHeight - (headerHeight + footerHeight);

  this.$content.css({
      'overflow': 'hidden'
  });

  this.$element
    .find('.modal-body').css({
      'max-height': maxHeight,
      'overflow-y': 'auto'
  });
}

$('.modal').on('show.bs.modal', function() {
  $(this).show();
  setModalMaxHeight(this);
});

$(window).resize(function() {
  if ($('.modal.in').length != 0) {
    setModalMaxHeight($('.modal.in'));
  }
});

(Actualizado el 30/11/2015 http://cdpn.io/mKfCc con la edición anterior)


1
Excelente respuesta y post! Sin embargo, ¿esto también puede ser animado? Funciona muy bien cuando aparece, pero ¿qué pasa con la animación? Estoy en el trabajo y no puedo probarlo, pero estoy ansioso por ver los resultados
scooterlord

Puede agregar una clase de desvanecimiento en el modal. Mira mi solución actualizada en cdpn.io/mKfCc
dimbslmh

Aunque parece estar funcionando muy bien en codepen, no puedo hacer que funcione en mi proyecto. Supongo que solo necesitas agregar el código y no reemplazar algo, ¿verdad?
scooterlord

1
¡Hola de nuevo! Noté lo siguiente. Cuando se abre por primera vez el primer modal, el margen derecho es incorrecto hasta que cambie el tamaño una vez. ¿Alguna idea sobre este?
scooterlord

1
@bernie Hice capturas de pantalla en Browserstack con una bifurcación de mi codepen que tiene el modal abre corto en document.ready: browserstack.com/screenshots/… Browserstack no admite v9.3.x para capturas de pantalla (todavía), pero creo algo similar a lo que describiste ocurre en iOS 6.0 (Ver captura de pantalla iPad 3rd (6.0) (Vertical)). Quizás es un error viejo que ha regresado en v9.3.2. Si lo desea, puede presentar un informe de error en foros.developer.apple.com/community/safari-and-web/…
dimbslmh

37

Mi solución

.modal-dialog-center {
    margin-top: 25%;
}

    <div id="waitForm" class="modal">
        <div class="modal-dialog modal-dialog-center">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 id="headerBlock" class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <span id="bodyBlock"></span>
                    <br/>
                    <p style="text-align: center">
                        <img src="@Url.Content("~/Content/images/progress-loader.gif")" alt="progress"/>
                    </p>   
                </div>
            </div>
        </div>
    </div>

Debes usar padding-top. margen interrumpirá la acción de cierre cuando haga clic en la superposición
anvd

2
El margen superior establecido en 25% requiere que el modal sea 50% alto.
rebelión

28

Simplemente se puede arreglar con display: flex

.modal-dialog {
  margin-top: 0;
  margin-bottom: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.modal.fade .modal-dialog {
  transform: translate(0, -100%);
}

.modal.in .modal-dialog {
  transform: translate(0, 0);
}

Con prefijo

.modal-dialog {
  margin-top: 0;
  margin-bottom: 0;
  height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -100%);
          transform: translate(0, -100%);
}
.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

2
Esto evita que se haga clic en el fondo debido a la altura de 100vh. Está bien para la configuración "telón de fondo: 'estática'".
ianstigator

esta causa se desvanece problema de animación
Viswanath Lekshmanan 05 de

23

¡Se me ocurrió una solución CSS pura! Sin embargo, es css3, lo que significa que ie8 o inferior no es compatible, pero aparte de esto, se ha probado y funciona en ios, android, ie9 +, chrome, firefox, safari de escritorio ...

Estoy usando el siguiente CSS:

.modal-dialog {
  position:absolute;
  top:50% !important;
  transform: translate(0, -50%) !important;
  -ms-transform: translate(0, -50%) !important;
  -webkit-transform: translate(0, -50%) !important;
  margin:auto 5%;
  width:90%;
  height:80%;
}
.modal-content {
  min-height:100%;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0; 
}
.modal-body {
  position:absolute;
  top:45px; /** height of header **/
  bottom:45px;  /** height of footer **/
  left:0;
  right:0;
  overflow-y:auto;
}
.modal-footer {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
}

Aquí hay un violín. http://codepen.io/anon/pen/Hiskj

... seleccionando esto como la respuesta correcta ya que no hay javascript extra pesado que ponga de rodillas al navegador en caso de más de un modales.


8
El objetivo de usar JavaScript era obtener la altura desconocida del modal. Su solución tiene una altura fija del 80%, que no responde a su propia pregunta: "¿Cómo puede colocar el modal verticalmente en el centro cuando no conoce la altura exacta del modal ?"
dimbslmh

... la dimensión de altura se establece para limitar la altura modal MÁXIMA en comparación con la altura de la pantalla. Sin embargo, el porcentaje de traducción se establece de acuerdo con la altura del CONTENIDO.
scooterlord

3
Si desea obtener una solución que no cambie el tamaño del cuadro modal, pruebe también la siguiente solución css: tweaks.klickagent.ch/#30.05.2014_TwitterBootstrapCenterModal
klickagent.ch

Muy bien también. Sin embargo, tiene un enfoque diferente al que estoy describiendo. En su caso, todo el modal se mueve hacia arriba y hacia abajo, cuando en mi caso se crea un elemento desbordado. ¡Muy bonito sin embargo! ¡Me gusta!
scooterlord

Esto requiere que se establezca la altura. Lo cual no es exactamente lo mismo que el usuario solicita.
rebelión

21

Si está de acuerdo con el uso de flexbox, esto debería ayudar a resolverlo.

.modal-dialog {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
}

.modal-content {
  margin: 0 auto;
}

77
Descubrí que esta respuesta funciona muy bien para mí. Sin embargo, si desea permitir que los usuarios cierren un modal haciendo clic en su fondo, asegúrese de agregar pointer-events: nonea .modal-dialogy pointer-events: autopara .modal-content. Porque .modal-dialog {height: 100%}cubrimos toda la columna arriba y debajo de un modal y deshabilitamos a los usuarios para que hagan clic en el fondo de esa área.
wuct

combinado con la sugerencia de @ChingTingWu, más efectivo
strider

¿Y dónde está la sugerencia @ChingTingWu?
giovannipds

1
ChingTingWu parece haber cambiado a @wuct
xiaolin

1
@giovannipds Vaya, he cambiado el nombre de mi nombre de usuario porque es más corto y fácil de etiquetar. Lo siento por confundir :)
wuct

20

Mi solución:

.modal.in .modal-dialog 
{
    -webkit-transform: translate(0, calc(50vh - 50%));
    -ms-transform: translate(0, 50vh) translate(0, -50%);
    -o-transform: translate(0, calc(50vh - 50%));
    transform: translate(0, 50vh) translate(0, -50%);
}

Esto parece funcionar perfectamente con Bootstrap 3. ¿Por qué no es esta la respuesta aceptada? Es mucho más simple (4 directivas CSS) que las otras.
danielricecodes

@danielricecodes Voy a tomar una foto y asumir que se debe a los problemas con las unidades de ventana gráfica. . La respuesta propuesta por scooterlord propuso compatibilidad incluso con IE9 e iOs, lo que me sugiere que es una preocupación. Si revisa la página de problemas de canIuse, verá que hay problemas con iOs e IE10 y versiones anteriores. No es que esté de acuerdo o no que esta sea la respuesta correcta. Solo estoy señalando por qué tal vez esto no fue seleccionado como la respuesta.
Malavos

1
Hay un problema con este enfoque cuando el modal tiene contenido desplazable (más contenido del que cabe en la ventana)
Steven Pribilinskiy

Esta debería ser la respuesta aceptada. Hasta ahora, esta es la única solución que funciona para mí. Gracias por esto.
shifu

Esto no funcionará si su contenido modal es mayor que la altura de la pantalla (si su modal tiene que desplazarse)
Brett Gregson

18

Todo lo que hice en mi caso es configurar el Top en mi CSS sabiendo la altura del modal

<div id="myModal" class="modal fade"> ... </div>

en mi css puse

#myModal{
    height: 400px;
    top: calc(50% - 200px) !important;
}

1
Como novato en CSS, esta respuesta parecía la menos aterradora y hizo el trabajo
Oded Ben Dov

2
Esto no responde a la primera parte de la pregunta: "... cuando no sabes la altura exacta del modal?"
natec

15

Agregar este simple CSS también funciona.

.modal-dialog {
  height: 100vh !important;
  display: flex;
}

.modal-content {
  margin: auto !important;
  height: fit-content !important;
}

¿Qué es el contenido adecuado?
Marc Roussel

12

Hay una manera más fácil de hacer esto usando css:

.modal-dialog {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width:500px;
    height:300px;
}

Eso es. Tenga en cuenta que solo es necesario aplicarlo al .modal-dialogcontenedor div.

Demostración: https://jsfiddle.net/darioferrer/0ueu4dmy/


77
No responde en el móvil debido al ancho y la altura fijos.
ianstigator

Su respuesta supone que todos los dispositivos tienen la misma resolución de pantalla
Patricio Rossi

Ningún hombre. Supongo que entendió este ejemplo y es capaz de adaptarlo a cada caso.
Dario Ferrer

En Bootstrap v3.3.0 se ejecutó correctamente, gracias
Amin Ghaderi

11

Ampliando la excelente respuesta de @ Finik, esta solución solo se aplica a dispositivos no móviles. Probé en IE8, Chrome y Firefox 22, funciona con contenido muy largo o corto.

.modal {
  text-align: center;
}
@media screen and (min-device-width: 768px) {
  .modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }
}

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

8

La solución más universal que escribí. Calcula dinámicamente con la altura del diálogo. (El siguiente paso podría ser volver a calcular la altura de los cuadros de diálogo al cambiar el tamaño de la ventana).

JSfiddle: http://jsfiddle.net/8Fvg9/3/

// initialise on document ready
jQuery(document).ready(function ($) {
    'use strict';

    // CENTERED MODALS
    // phase one - store every dialog's height
    $('.modal').each(function () {
        var t = $(this),
            d = t.find('.modal-dialog'),
            fadeClass = (t.is('.fade') ? 'fade' : '');
        // render dialog
        t.removeClass('fade')
            .addClass('invisible')
            .css('display', 'block');
        // read and store dialog height
        d.data('height', d.height());
        // hide dialog again
        t.css('display', '')
            .removeClass('invisible')
            .addClass(fadeClass);
    });
    // phase two - set margin-top on every dialog show
    $('.modal').on('show.bs.modal', function () {
        var t = $(this),
            d = t.find('.modal-dialog'),
            dh = d.data('height'),
            w = $(window).width(),
            h = $(window).height();
        // if it is desktop & dialog is lower than viewport
        // (set your own values)
        if (w > 380 && (dh + 60) < h) {
            d.css('margin-top', Math.round(0.96 * (h - dh) / 2));
        } else {
            d.css('margin-top', '');
        }
    });

});

7

Encontré la solución perfecta desde aquí

$(function() {
    function reposition() {
        var modal = $(this),
            dialog = modal.find('.modal-dialog');
        modal.css('display', 'block');

        // Dividing by two centers the modal exactly, but dividing by three 
        // or four works better for larger screens.
        dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
    }
    // Reposition when a modal is shown
    $('.modal').on('show.bs.modal', reposition);
    // Reposition when the window is resized
    $(window).on('resize', function() {
        $('.modal:visible').each(reposition);
    });
});

1
Gracias. Perfecto para mí con un cambio: dialog.css ("margin-top", Math.max (0, ($ (document) .scrollTop () + (($ (window) .height () - dialog.height ()) / 2))));
Viacheslav Soldatov

4
$('#myModal').on('shown.bs.modal', function() {
    var initModalHeight = $('#modal-dialog').outerHeight(); //give an id to .mobile-dialog
    var userScreenHeight = $(document).outerHeight();
    if (initModalHeight > userScreenHeight) {
        $('#modal-dialog').css('overflow', 'auto'); //set to overflow if no fit
    } else {
        $('#modal-dialog').css('margin-top', 
        (userScreenHeight / 2) - (initModalHeight/2)); //center it if it does fit
    }
});

Con un par de ajustes en los selectores, esto funcionó de maravilla. @$modal = $('.fade.in'); modalBox = @$modal.find('.modal-content'); initModalHeight = modalBox.outerHeight(); userScreenHeight = @$modal.outerHeight()
juliangonzalez

4

Aquí hay otro método css único que funciona bastante bien y se basa en esto: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

hablar con descaro a:

.modal {
    height: 100%;

    .modal-dialog {
        top: 50% !important;
        margin-top:0;
        margin-bottom:0;
    }

    //keep proper transitions on fade in
    &.fade .modal-dialog {
        transform: translateY(-100%) !important;
    }
    &.in .modal-dialog {
        transform: translateY(-50%) !important;
    }
}

Al igual que con otras transformsoluciones, el problema surge cuando el modal tiene contenido desplazable (más contenido del que cabe en la ventana)
Steven Pribilinskiy

3

He descargado bootstrap3-dialog desde el siguiente enlace y he modificado la función de abrir en bootstrap-dialog.js

https://github.com/nakupanda/bootstrap3-dialog

Código

open: function () {
            !this.isRealized() && this.realize();
            this.updateClosable();
            //Custom To Vertically centering Bootstrap 
            var $mymodal = this.getModal();
            $mymodal = $mymodal.append('<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"><tr><td align="center" valign="middle" class="centerModal"></td></tr></table>');
            $mymodal = $mymodal.find(".modal-dialog").appendTo($mymodal.find(".centerModal"));
            //END
            this.getModal().modal('show');
            return this;
        }

Css

.centerModal .modal-header{
    text-align:left;
}
.centerModal .modal-body{
    text-align:left;
} 

Aquí hay una modificación que puede aplicarse en su propio código, sin tener que cambiar la fuente original de BSDialog: gist.github.com/mahemoff/8ff6d3782d2da6f9cbb3 (solo algunas modificaciones al JS, también está escrito en Coffee, pero se entiende la idea).
mahemoff

3

Esto funciona para mi:

.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;
}

2

Intenta algo como esto:

.popup__overlay {
    position: fixed;
    left:  0;
    top:  0;
    width: 100%;
    height: 100%;
    z-index: 999;
    text-align: center
    }
.popup {
    display: inline-block;
    vertical-align: middle
    } 

1
Esto podría funcionar bastante bien, pero los modales de bootstrap tienen absolutos, dentro de fijos, dentro de esto y aquello ...: /
scooterlord

1
¿Qué tienen que ver estas clases con los modales Bootstrap / Bootstrap?
lofihelsinki


1

Una manera simple Trabaja para mi. Gracias rensdenobel :) http://jsfiddle.net/rensdenobel/sRmLV/13/

<style>
.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
}
.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;
}
</style>
<!-- Button trigger modal -->
<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>    

1

otra solución que establecerá una posición válida para cada modal visible en el window.resizeevento y en show.bs.modal:

(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);

1
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);

1

Sé que es un poco tarde, pero estoy agregando una nueva respuesta para que no se pierda entre la multitud. Es una solución de navegador móvil de escritorio cruzado que funciona en todas partes correctamente como debería.

Solo necesita modal-dialogestar envuelto dentro de una modal-dialog-wrapclase y debe tener las siguientes adiciones de código:

.modal-dialog-wrap {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
}

.modal-dialog {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.modal-content {
  display: inline-block;
  text-align: left;
}

El cuadro de diálogo comienza centrado y, en casos de gran contenido, simplemente crece verticalmente hasta que aparece una barra de desplazamiento.

¡Aquí hay un violín de trabajo para tu placer!

https://jsfiddle.net/v6u82mvu/1/


1

Esto es bastante antiguo y específicamente pide una solución usando Bootstrap 3, pero para cualquiera que se pregunte: desde Bootstrap 4 en adelante hay una solución incorporada llamada .modal-dialog-centered. Aquí está el problema: https://github.com/twbs/bootstrap/issues/23638

Entonces, usando v4 solo necesita agregar .modal-dialog-centereda .modal-dialogpara centrar verticalmente el modal:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- 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>

0

Considere usar el complemento bootstrap-modal que se encuentra aquí: https://github.com/jschr/bootstrap-modal

El complemento centrará todos tus modales


... desafortunadamente lo intenté pero no pude hacerlo funcionar correctamente, al menos no con MI código. ¡Supongo que todos deben personalizar esto según sus necesidades! Gracias por la respuesta sin embargo.
scooterlord

0

Para el centrado, no entiendo qué hay con las soluciones demasiado complicadas. bootstrap ya lo centra horizontalmente para usted, por lo que no necesita meterse con esto. Mi solución es establecer un margen superior solo con jQuery.

$('#myModal').on('loaded.bs.modal', function() {
    $(this).find('.modal-dialog').css({
        'margin-top': function () {
            return (($(window).outerHeight() / 2) - ($(this).outerHeight() / 2));
        }
    });
});

He usado el evento loaded.bs.modal ya que estoy cargando contenido de forma remota, y usar el evento shown.ba.modal hace que el cálculo de altura sea incorrecto. Por supuesto, puede agregar un evento para cambiar el tamaño de la ventana si necesita que responda de esa manera.


si el modal es lo suficientemente grande, puede causar problemas
scooterlord

0

Una forma muy fácil de lograr este concepto y obtendrá modal siempre en el modelo de su pantalla mediante css como fllow: http://jsfiddle.net/jy0zc2jc/1/

solo tiene que modalmostrar la clase como tabla siguiendo css:

display:table

y modal-dialog comodisplay:table-cell

ver ejemplo de trabajo completo en violín dado


No veo un modal en absoluto
ThaDafinser 01 de

Lo único que veo (en Google Chrome) es un icono de cruz roja y el fondo
ThaDafinser

No desplazable cuando el modal tiene más contenido del que cabe en la ventana
Steven Pribilinskiy

0

No es tan complicado.

por favor intente esto:

$(document).ready(function(){
    var modalId = "#myModal";
    resize: function(){
            var new_margin = Math.ceil(($(window).height() - $(modalId).find('.modal-dialog').height()) / 2);
            $(modalId).find('.modal-dialog').css('margin-top', new_margin + 'px');
    }
    $(window).resize(function(){
        resize();
    });
    $(modalId).on('shown.bs.modal', function(){
        resize();
    });
});

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 de 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;
}

0

En la forma de planta móvil puede parecer un poco diferente, aquí está mi código.

<div class="modal-container">
  <style>
  .modal-dialog{
    margin-top: 60%;
    width:80%;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 100%
  }
  @media screen and (orientation:landscape){
    .modal-dialog{
      margin-top: 70;
      width:80%;
      margin-left: 10%;
      margin-right: 10%;
      margin-bottom: 100%
    }
  }
  .modal-body{
    text-align: center;
  }
  .modal-body p{
    margin:14px 0px;
    font-size: 110%;
  }
  .modal-content{
    border-radius: 10px;
  }
  .modal-footer{
    padding:0px;
  }
  .modal-footer a{
    padding: 15px;
  }
  .modal-footer a:nth-child(1){
    border-radius: 0px 0px 0px 10px;
  }
  .modal-footer a:nth-child(2){
    border-radius: 0px 0px 10px 0px;
  }
  </style>
  <h2>Basic Modal Example</h2>
  <div data-toggle="modal" data-target="#myModal">Div for modal</div>
    <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
            <p>确定要取消本次订单嘛?</p>
          </div>
          <div class="modal-footer">
            <div class="btn-group btn-group-justified">
              <a href="#" class="btn btn-default" data-dismiss="modal">取消</a>
              <a href="#" class="btn btn-default" data-dismiss="modal">确定</a>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.