Me gustaría centrar mi modal en el viewport (medio) He intentado añadir algunas propiedades css
.modal { position: fixed; top:50%; left:50%; }
Estoy usando este ejemplo
He probado
$("#MyModal").modal('show').css(
{
'margin-top': function () {
return -($(this).height() / 2);
},
'margin-left': function () {
return -($(this).width() / 2);
}
})
Esto es lo que hice para mi aplicación. Si echas un vistazo a las siguientes clases en el archivo bootstrap.css .modal-dialog tiene un padding por defecto de 10px y @media screen y (min-width: 768px) .modal-dialog tiene un padding superior establecido en 30px. Así que en mi archivo css personalizado establecí mi relleno superior para ser 15% para todas las pantallas sin especificar un ancho de pantalla de los medios de comunicación. Espero que esto ayude.
.modal-dialog {
padding-top: 15%;
}
El parámetro top se anula en .modal.fade.in para forzar el valor establecido en su declaración personalizada, añada la palabra clave !important
después de top. Esto obliga al navegador a utilizar ese valor e ignorar cualquier otro valor de 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%;
}
después de 4 horas he encontrado la solución. Para centrar el modal en diferentes resoluciones (escritorio, tablets, smartphones):
index.php
<! - Bootstrap core CSS ->
<link href=".../css/bootstrap-modal-bs3patch.css" rel="stylesheet">
<link href=".../css/bootstrap-modal.css" rel="stylesheet">
El archivo bootstrap-modal-bs3patch.css lo he descargado de https://github.com/jschr/bootstrap-modal
Luego modifiqué este archivo Css de la siguiente manera:
body.modal-open,
. modal-open. navbar-fixed-top,
. modal-open. navbar-fixed-bottom {
margin-right: 0;
}
. {modal
padding: 0;
}
. modal.container {
max-width: none;
}
@ media (min-width: 768px) and (max-width: 992px) {
. {modal-dialog
background-color: black;
position: fixed;
top: 20%! important;
left: 15%! important;
}
}
@ media (min-width: 992px) and (max-width: 1300px) {
. {modal-dialog
background-color: red;
position: fixed;
top: 20%! important;
left: 20%! important;
}
}
@ media (min-width: 1300px) {
. {modal-dialog
background-color: # 6e7ec3;
position: fixed;
top: 40%! important;
left: 35%! important;
}
}
¡Hice pruebas en diferentes resoluciones y funciona!