Làm cách nào để làm cho cửa sổ bật lên phương thức cuộn nội dung của trang đó xuống với trang?

Question

Tôi có cửa sổ bật lên phương thức và khi tải nội dung cao hơn chiều cao của trình duyệt, tôi không thể cuộn xuống để xem phần còn lại của thông tin. Thay vào đó, nền có thể cuộn nhưng cửa sổ bật lên sẽ không. Thay vào đó tôi muốn có cửa sổ bật lên được đặt và khi người dùng cuộn lên hoặc xuống, hãy để cửa sổ bật lên tại chỗ và để chúng cuộn xuống cuối nội dung. Nếu bạn tạo một bài đăng dài trên Facebook, cửa sổ bật lên hoạt động chính xác và tôi muốn biết cách tôi có thể có được hiệu ứng tương tự với điều khiển này.

Answer 1

Đặt kiểu overflow: auto vào khối vùng chứa.

Answer 2

Trong css của cửa sổ bật lên phương thức, hãy đặt chiều rộng của modalpop lên, sau đó đặt overflow:auto. Điều đó sẽ cung cấp cho bạn thanh cuộn ngang. Ví dụ:

.ModalPopupPanel 
{ 
    width:900px; 
    overflow:auto; 
} 

Vì vậy, khi chiều rộng nội dung vượt quá 900px, thanh cuộn ngang sẽ hiển thị. Điều này cũng đúng cho thanh cuộn dọc, nơi bạn cần đặt chiều cao của modalpop.

Answer 3

Tập lệnh này đặt chiều cao cửa sổ bật lên thành 90% chiều cao màn hình, sau đó bạn có thể đặt tràn: tự động;

<script type="text/javascript"> 
    function pageLoad() { 
     $get('<%= Panel.ClientID %>').style.height = document.documentElement.clientHeight * 0.9 + "px"; 
    } 
    </script> 

đây là câu hỏi liên quan Tôi hỏi và giải pháp tôi đã tìm thấy.

asp.net ModalPopupExtender : need to show scroll bar when overflow

Answer 4

Bạn có thể thêm một lớp học để các tag cơ thể khi popup mở cửa để ẩn các thanh cuộn, và loại bỏ nó khi popup sẽ biến mất, sau đó nền của bạn nên được position: fixed và chiều cao nên window.height() (lấy nó động với JS), và cũng tràn: auto. Điều gì xảy ra với tất cả những gì xảy ra, nếu cửa sổ bật lên cao hơn nền, bạn sẽ có thanh cuộn đẹp ở bên phải và vì thanh cuộn trên cơ thể của bạn bị ẩn, bạn sẽ chỉ thấy thanh đó. Ngoài ra, chính trang đó cũng không cuộn. Đó là cách Facebook thực hiện với trình xem ảnh của họ.

Answer 5

Bạn có thể thử này để di chuyển modalpopup với contens của nó: Đặt PopupDragHandleControlID trỏ nó đến một bảng trống rỗng, chế độ thiết lập lại vị trí = "Không" này sẽ giữ cho phương thức cố định ở vị trí tương tự như bạn cuộn trang.

Answer 6

Đây là giải pháp làm việc đơn giản và tốt nhất

Thêm lớp đó vào trang popup phương thức của bạn.

body.modal-open { 
 
overflow: auto; 
 
}