Я столкнулся с той же проблемой с длинной формой. Javascript не был для меня вариантом, поэтому я получил полностью решение HTML-CSS.
Основная цель заключалась в том, чтобы кодировать его, просто работая с процентами, чтобы иметь простой способ для создания медиа-запросов.
Я тестировал его с помощью Firefox 22.0, Google Chrome 28.0.1500.71, Safari 6.0.5 и IE8. Вот демо .
Модальная структура HTML:
Ключ должен состоять в том, чтобы структурные divs были чистыми от padding/margin/border. Все эти стили должны применяться к элементам внутри них.
<div id="dialog" class="modal hide dialog1" aria-hidden="false">
<div class="modal-header">
</div>
<div class="modal-body">
<div>
</div>
</div>
</div>
Стили:
Стили, применяемые к этим структурным divs, являются теми, которые определяют его размер.
.modal.dialog1 { /* customized styles. this way you can have N dialogs, each one with its own size styles */
width: 60%;
height: 50%;
left: 20%; /* ( window's width [100%] - dialog's width [60%] )/2 */
}
/* media query for mobile devices */
@media ( max-width: 480px ) {
.modal.dialog1 {
height: 90%;
left: 5%; /* ( window's width [100%] - dialog's width [90%] )/2 */
top: 5%;
width: 90%;
}
}
/* split the modal in two divs (header and body) with defined heights */
.modal .modal-header {
height: 10%;
}
.modal .modal-body {
height: 90%;
}
/* The div inside modal-body is the key; there's where we put the content (which may need the vertical scrollbar) */
.modal .modal-body div {
height: 100%;
overflow-y: auto;
width: 100%;
}
Более подробный код приведен в демо , где вы увидите все классы стилей и стили бутстрапа, которые должны быть инвалидов/переопределенная.