Я придумал чистое решение css! Это css3, хотя это означает, что ie8 или lower не поддерживается, но кроме этого он протестирован и работает на ios, android, ie9 +, chrome, firefox, desktop safari ..
Я использую следующий 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;
}
Вот скрипка. http://codepen.io/anon/pen/Hiskj
.. выбрав это как правильный ответ, так как нет особо тяжелого javascript, который заставляет браузер встать на колени в случае более чем одного модала.