Ánh sáng màu nền hộp nên bao gồm toàn bộ màn hình sử dụng CSS

Question

này được URL trang của tôi

http://sample.com/mytest.php

Trong trang này, nếu chúng ta bấm vào một nút Đăng nhập nó sẽ hiển thị một màn hình popup với nền đen. Nhưng nếu chúng ta thu nhỏ trang, thì nó sẽ làm giảm kích thước của màu nền. Nhưng tôi muốn che phủ toàn bộ màn hình nếu chúng tôi thu nhỏ. Tôi đã sử dụng mã bên dưới trong trang của mình.

.black_overlay{ 
    display: none; 
    position: absolute; 
    top: 0%; 
    left: 0%; 
    width: 100%; 
    height: 2000%; 
    background-color: black; 
    z-index:1001; 
    -moz-opacity: 0.8; 
    opacity:.80; 
    filter: alpha(opacity=80); 
} 

Nhưng trong trang thử nghiệm, mã bên dưới được sử dụng để che phủ toàn bộ nền. Nó hoạt động tốt.

<style type="text/css"> 
    /*give the body height:100% so that its child 
    elements can have percentage heights*/ 
    body{ height:100% } 
    /*this is what we want the div to look like*/ 
    div.fullscreen{ 
    display:block; 
    /*set the div in the top-left corner of the screen*/ 
    position:absolute; 
    top:0; 
    left:0; 
    background-color: black; 
    /*set the width and height to 100% of the screen*/ 
    width:100%; 
    height:100%; 
    color: white; 
    } 
</style> 

<div class="fullscreen"> 
    <p>Here is my div content!!</p> 
</div> 

Làm cách nào tôi có thể làm tương tự cho nền trang đăng nhập mà tôi không biết. Bất cứ ai cũng có thể giúp tôi giải quyết vấn đề này.

Answer 1

thử

div.fullscreen{ 
    position:fixed 
    ... 
} 

tuyệt đối: Yếu tố là vị trí liên quan đến đầu tiên yếu tố vị trí tốt (không tĩnh) tổ tiên của nó
cố định: Yếu tố là vị trí tương đối so với cửa sổ trình duyệt

Answer 2

Bạn cần phải di chuyển cửa sổ bật lên và nền của bạn ra bên ngoài bất kỳ phần tử khối nào khác, có thể ngay trước </body>. Nền được kéo dài để lấp đầy 100% của container của nó mà là ô bảng chứ không phải là cơ thể. Điều này có nghĩa là bạn sẽ phải thay đổi vị trí (trái và phải) mặc dù.

Answer 3

Bạn phải đặt mã dưới đây trước khi kết thúc thẻ nội dung hay sau khi bắt đầu của thẻ cơ thể

<div class="black_overlay" id="fade" style="display: block;"></div> 

Answer 4

Vấn đề là div.black_overlay là bên trong bảng, vì vậy bạn không thể sử dụng widht:100% và height:100% . Chỉ cần di chuyển div.black_overlay bên ngoài bảng và thêm z-index: 1;. Tôi đã thử nghiệm bằng cách sử dụng Firebug và nó hoạt động!