Bootstrap 2 - установка диалога/модального положения
Я нашел один способ сделать это:
использовать поля для управления диалоговым положением, поэтому margin: -335px 0 0 -280px
;
задавая ширину, вы должны reset поля width: 900px; margin: -250px 0 0 -450px;
для установки высоты используйте max-height max-height: 800px;
на основе
http://www.revillwebdesign.com/change-the-height-width-and-position-of-a-modal-in-twitter-bootstrap/
Есть ли лучший способ сделать это? Используя тот или иной подход, есть ли способ сдвинуть диалог вниз до top:0px
и оставаться там до отклонения?
Использование первых настроек полей, о которых я говорил, делает это, но очевидно, что, как только размер браузера будет изменен, он будет выведен из поля зрения.
Ответы
Ответ 1
Просто переопределите позицию CSS, например
.modal, .modal.fade.in {
top: 0; /* was 10% */
}
Обратите внимание, что это с Bootstrap 2.2.2. Единственный запас - это отрицательное левое поле, которое составляет половину ширины модального (центрирует модальный по горизонтали). Не требуются верхние поля.
Пример jsFiddle здесь - http://jsfiddle.net/uuwAn/1/
Ответ 2
Вы можете изменить CSS
в конце, чтобы архивировать это поведение.
.modal-body {
max-height: 350px;
-webkit-overflow-scrolling: touch;
}
@media screen and (max-height: 450px), (max-height: 450px) {
.modal-body {
max-height: 130px;
}
}
Теперь он будет хорошо работать на мобильных устройствах.
ПРИМЕЧАНИЕ. Выполняется с использованием запроса Media CSS
.