colore di sfondo Light box dovrebbe coprire l'intero schermo usando i CSS

Question

Questa è la mia pagina URL

http://sample.com/mytest.php

In questa pagina, se si fa clic su un pulsante Accedi si visualizzerà una schermata pop-up con sfondo nero. Ma se riduciamo la pagina, riduce le dimensioni di un colore di sfondo. Ma voglio coprire lo sfondo di tutto lo schermo se riduciamo lo zoom. Ho usato il codice qui sotto nella mia pagina.

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

Ma in una pagina di test viene utilizzato il seguente codice per coprire tutto lo sfondo. Funziona bene.

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

Come posso fare lo stesso per il mio sfondo della pagina di accesso che non conosco. Chiunque può per favore aiutarmi a risolvere questo problema.

Answer 1

prova

div.fullscreen{ 
    position:fixed 
    ... 
} 

assoluta: L'elemento è posizionato rispetto al suo primo elemento posizionato (non statico) antenato
fisso: L'elemento è posizionato rispetto alla finestra del browser

Answer 2

È necessario spostare il popup e lo sfondo all'esterno di qualsiasi altro elemento di blocco, probabilmente appena prima dello </body>. Lo sfondo si sta allungando per riempire il 100% del suo contenitore che è la cella della tabella piuttosto che il corpo. Ciò significa che dovrai comunque modificare la posizione (sinistra e destra).

Answer 3

Dovete mettere sotto il codice prima della fine del tag body o dopo l'inizio del tag body

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

Answer 4

Il problema è che div.black_overlay è all'interno della tabella, quindi non è possibile utilizzare widht:100% e height:100% . Basta spostare div.black_overlay fuori dal tavolo e aggiungere z-index: 1;. Ho provato a usare Firebug e funziona!