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.