twitter bootstrap - sirve - Bootstrap 3 modal posición vertical centro

modal bootstrap 4 example

Question

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 centrar el modal y desbordar: auto en el cuerpo modal, 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 la pantalla vertical, pero para los contenidos modales pequeños es prácticamente inutilizable.

Answer 1

¡Se me ocurrió una solución css pura! Sin embargo, es css3, lo que significa que no se admite ie8 o inferior, pero, aparte de esto, se ha probado y está funcionando en iOS, Android, ie9 +, Chrome, Firefox, escritorio de Safari ...

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 un javascript demasiado pesado que haga que el navegador se arrodille en caso de que haya más de un modal.

Answer 2

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

Answer 3

Aquí hay otro método css solo 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;
}
}

Answer 4

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

El plugin centrará todos tus modales.

Answer 5

En la forma de planta móvil puede verse 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>

Answer 6

Encontré la solución perfecta desde here

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

Answer 7

Es posible que desee revisar esta colección de métodos para el centrado absoluto de un div: http://codepen.io/shshaw/full/gEiDt

Answer 8

Estilo de mesa

<!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <table height="100%" width="100%"> <tr><td valign="middle"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</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> </td></tr> </table> </div>

Answer 9

Esto funciona para mí:

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

Answer 10

Hay una forma 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 que se aplique a la div del contenedor .modal-dialog .

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

Answer 11

He descargado bootstrap3-dialog del 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;
}

Answer 12

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
}

Answer 13

La solución más universal que escribí. Cálculos dinámicos con altura de diálogo. (El siguiente paso podría ser recalcular la altura de los diálogos en 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'', '''');
}
});
});

Answer 14

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>

Answer 15

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%);
}

Answer 16

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 simplemente establecer un margen superior utilizando jQuery.

display:table

He utilizado el evento loaded.bs.modal ya que estoy cargando contenido de forma remota, y el uso del evento shown.ba.modal hace que el cálculo de altura sea incorrecto. Por supuesto, puede agregar un evento para el tamaño de la ventana si necesita que sea tan sensible.

Answer 17

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 de escritorio cruzado que funciona correctamente en todas partes como debería.

Solo necesita que el modal-dialog se ajuste dentro de una clase de modal-dialog-wrap y que tenga los siguientes agregados de código:

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

El 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 su placer!

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

Answer 18

Si estás de acuerdo con usar flexbox, entonces esto debería ayudar a resolverlo.

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

Answer 19

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

Answer 20

Todo lo que hice en mi caso es colocar el Top en mi css sabiendo la altura del modal

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

en mi css me puse

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

Answer 21

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

solo tiene que mostrar la clase modal como tabla siguiendo css:

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

y modal-dialog como display:table-cell

Ver ejemplo completo de trabajo en el violín dado

Answer 22

Una forma sencilla. Trabaja para mi. Thks rensdenobel :) http://jsfiddle.net/rensdenobel/sRmLV/13/

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

Answer 23

Usa este simple script 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);

También agregue esta corrección CSS para el espaciado horizontal modal; mostramos el desplazamiento en los modales, los desplazamientos del cuerpo se ocultan automáticamente mediante Bootstrap:

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

Answer 24

establecer el centro modal a la pantalla

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<table height="100%" width="100%">
<tr><td valign="middle">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</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>
</td></tr>
</table>
</div>

Answer 25

no es tan complicado

por favor intente esto:

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

Answer 26

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

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

Answer 27

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

Para centrar en forma absoluta el Bootstrap 3 Modal sin declarar una altura, primero deberá sobrescribir el Bootstrap CSS 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 diálogos modales en el centro de la ventana.

Tenemos que agregar esta consulta de medios o, de lo contrario, el margen modal a la izquierda es incorrecto en dispositivos pequeños:

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

Ahora tendremos que ajustar su posición con JavaScript. Para hacer eso le damos al elemento un margen superior e izquierdo negativo igual a la mitad de su altura y ancho. 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 al Centrado 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;
}

Note el margen negativo, ¿verdad? Esto elimina el espacio agregado por inline-block. Ese espacio hace que el modal salte al final de la página @media ancho <768px.

2. ¿Es posible centrar el modal y tener un desbordamiento: auto en el cuerpo modal, pero solo si el modal excede la altura de la pantalla?

Esto es posible al darle 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 de trabajo aquí con Bootstrap 3.0.3: http://cdpn.io/GwvrJ EDIT: Recomiendo usar la versión actualizada 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)

Answer 28

$(''#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
}
});

Answer 29

.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 ajusta un poco la clase .fade para asegurarte de que aparezca fuera del borde superior de la ventana, en lugar del centro

Answer 30

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