Bootstrap 2 - set thoại/modal vị trí

Question

Tôi đã tìm thấy một cách để làm điều này:

lề sử dụng để kiểm soát vị trí hộp thoại để margin: -335px 0 0 -280px;

thiết lập chiều rộng, bạn phải thiết lập lại lề width: 900px; margin: -250px 0 0 -450px;

để thiết lập chiều cao sử dụng max-height max-height: 800px; dựa trên

http://www.revillwebdesign.com/change-the-height-width-and-position-of-a-modal-in-twitter-bootstrap/

Có cách nào tốt hơn để làm điều này? Sử dụng phương pháp này hoặc cách tiếp cận khác, có cách nào để chỉ trượt hộp thoại xuống top:0px và ở đó cho đến khi bị loại bỏ không?

Sử dụng cài đặt lề đầu tiên mà tôi đã đề cập, nhưng rõ ràng ngay sau khi trình duyệt được thay đổi kích thước, nó sẽ bị đẩy ra khỏi tầm nhìn.

Answer 1

Đơn giản chỉ cần ghi đè lên vị trí CSS, ví dụ:

.modal, .modal.fade.in { 
    top: 0; /* was 10% */ 
} 

Lưu ý, đây là với Bootstrap 2.2.2. Lề duy nhất là lề trái âm, bằng một nửa chiều rộng của phương thức (đặt giữa phương thức theo chiều ngang). Không yêu cầu lợi nhuận hàng đầu.

jsFiddle ví dụ ở đây - http://jsfiddle.net/uuwAn/1/

Answer 2

Bạn có thể thay đổi CSS ở cuối của bạn để lưu trữ hành vi này.

.modal-body { 
    max-height: 350px; 
    -webkit-overflow-scrolling: touch; 
} 

@media screen and (max-height: 450px), (max-height: 450px) { 
    .modal-body { 
     max-height: 130px; 
    } 

} 

Bây giờ, thiết bị sẽ hoạt động tốt trên thiết bị di động. LƯU Ý: được thực hiện bằng cách sử dụng truy vấn Phương tiện là CSS.