Đặt lớp phương thức ở giữa màn hình đã xem

Question

Tôi đang sử dụng Twitter Bootstrap's modal, nhưng tôi phải thay đổi vị trí của chúng thành tuyệt đối, nguyên nhân là tôi cần chúng để cuộn nguyên nhân của màn hình nhỏ. Đáng buồn thay, với điều này, các modals mở đến một vị trí cố định của trang web và không phải trên khu vực được xem. Có cách nào để mở chúng (và có thể cuộn) đến màn hình những gì tôi hiện đang xem không?

CSS:

.modal { 
    width: 845px; 
    margin: -250px 0 0 -430px; 
    background-color: #f6f5ed; 
    position: absolute; 
    border: 1px solid #cdc4b2; 
    top: 50%; 
    left: 50%; 
} 

Answer 1

chủ đề này: Modal plugin of Bootstrap 2 is not displayed by the center có câu trả lời đúng, được đăng ở đây cũng như:

$('#YourModal').modal().css(
      { 
       'margin-top': function() { 
        return window.pageYOffset-($(this).height()/2); 
       } 
      }); 

Answer 2

Sử dụng vị trí "cố định" không phải là "tuyệt đối".

Xem thêm chi tiết tại đây http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Answer 3

Các giải pháp từ @steve không làm việc cho tôi mặc dù vấn đề của tôi là giống với @ Stephanie.

Khôi phục sự cố mà Stephanie và tôi chia sẻ:

Tôi có các kiểu khởi động dài. Trên màn hình nhỏ, các modals không thể được nhìn thấy toàn bộ mà không cần cuộn. Theo mặc định trong các mô hình bootstrap là vị trí: cố định. Tôi có thể cho phép chúng được cuộn bằng cách thay đổi điều này thành vị trí: tuyệt đối.

Nhưng bây giờ tôi có một vấn đề mới. Các trang của tôi cũng dài và khi tôi kích hoạt phương thức từ dưới cùng của trang, phương thức xuất hiện ở số đầu trang của trang, ngoài chế độ xem trình duyệt hiện tại.

Vì vậy, để khắc phục cả hai:

css:

// allows the modal to be scrolled 
.modal {position: absolute;} 

javascript/jQuery:

// jumps browser window to the top when modal is fired 
$('body').on('show', '.modal', function(){ 
    $('body').scrollTop(0); 
}); 

Nhưng nó chỉ ra rằng Firefox không thích 'body' như một selector cho scrollTop, nhưng không thích 'html'. Webkit hoạt động ngược lại. Sử dụng một bình luận từ đây: Animate scrollTop not working in firefox

Kể từ khi tôi đang sử dụng jQuery < 1.9 Tôi có thể làm trình duyệt sniffing để giải quyết này:

// jumps browser window to the top when modal is fired 
$('body').on('show', '.modal', function(){ 
    // Firefox wants 'html', others want 'body' 
    $(jQuery.browser.mozilla ? "html" : "body").scrollTop(0); 
}); 

Bây giờ khi modals được bắn chúng xuất hiện ở phía trên cùng của trang, cửa sổ trình duyệt cuộn lên để lộ chúng, nhưng người dùng vẫn có thể cuộn xuống nếu màn hình của họ quá nhỏ để hiển thị toàn bộ chiều dài của phương thức.

Answer 4

Đã phải thay đổi vị trí tuyệt đối cũng như vậy sẽ di chuyển trên điện thoại di động.

này đã làm việc cho tôi là tốt (giải pháp bởi AllInOne):

// jumps browser window to the top when modal is fired 
$('body').on('show', '.modal', function(){ 
    // Firefox wants 'html', others want 'body' 
    $(jQuery.browser.mozilla ? "html" : "body").scrollTop(0); 
}); 

Answer 5

Một chút muộn để các trò chơi nhưng đây là sửa chữa Tôi hiện đang có tại chỗ và hoạt động trên trình duyệt Firefox, Chrome và IE.

$('body').on('show', '.modal', function() { 
$(this).css({ 'margin-top': window.pageYOffset - $(this).height()/2, 'top': '50%' }); 
$(this).css({ 'margin-left': window.pageXOffset - $(this).width()/2, 'left': '50%' }); 
}); 

Answer 6

Vấn đề là CSS - "cơ thể" của bạn & "HTML" thẻ được thiết lập để "height: 100%"