Lekka skrzynka kolor tła powinien obejmować cały ekran za pomocą CSS

Question

To jest moja strona URL

http://sample.com/mytest.php

Na tej stronie, jeśli kliknij przycisk Zaloguj się wyświetli ekran popup z czarnym tłem. Ale jeśli pomniejszymy stronę, to zmniejsza ona rozmiar koloru tła. Ale chcę pomniejszyć tło całego ekranu. Użyłem kodu poniżej na mojej stronie.

.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); 
} 

Ale na stronie testowej poniższy kod służy do pokrycia całego tła. To działa dobrze.

<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> 

Jak mogę zrobić to samo dla mojego tła strony logowania, nie wiem. Każdy może pomóc mi rozwiązać ten problem.

Answer 1

spróbować

div.fullscreen{ 
    position:fixed 
    ... 
} 

absolutny: element jest umieszczony w stosunku do jej pierwszy element pozycjonowany (nie statyczne) przodka
stałe: element jest umieszczony w stosunku do okna przeglądarki

Answer 2

Musisz przenieść swoje wyskakujące okienko i tło na zewnątrz innych elementów bloku, prawdopodobnie tuż przed </body>. Tło sięga do wypełnienia 100% jego pojemnika, który jest komórką tabeli, a nie ciałem. Oznacza to, że będziesz musiał zmienić pozycję (lewą i prawą).

Answer 3

Musisz umieścić poniżej kodu przed końcem znacznika body lub po uruchomieniu tagu ciała

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

Answer 4

Problemem jest to, że div.black_overlay jest w środku tabeli, więc nie można użyć widht:100% i height:100% . Po prostu przenieś div.black_overlay poza stół i dodaj z-index: 1;. Testowałem przy użyciu Firebug i działa!