Rendere sottofondo iframe più trasparente inscurito e non cliccabile

**autsel** · 15-12-2016, 21:07

Questo funziona come vuoi tu.
Dopo 11 secondi si "oscura", ho aggiunto come test che dopo altri 5 secondi torna come prima.
Penso tu abbia abbastanza materiale su cui lavorare.
Ciao,
Simone.

codice:

<html>
    <head>
        <style type="text/css">
            body { z-index:1; margin: 0; padding: 0; background: repeat-x white;  font: 10px Verdana, Arial, Trebuchet, Sans-Serif; color: #000;  text-align: left; line-height: 190%; }
            #coprente {  width: 100%; height: 100%; position: absolute; top:0px; left:0px;  z-index:50; background-color: #000000; opacity: 0.8; filter:  alpha(opacity=80); display: none; }
            .popup { position: absolute;  top: 50%; left: 50%; margin-left: -300px; margin-top: -214px; width:  600px; height: 439px; display: none;  z-index: 100; }
        </style>


        <script type="text/javascript">window.onload= function(){setTimeout("copri();",11000)}</script>
        <script language="javascript">
            function copri() {
                document.getElementById("coprente").style.display="inline";
                document.getElementById("mariorossi").style.display="inline";
                setTimeout("scopri();",5000);
            }
            
            function scopri() {
                document.getElementById("coprente").style.display="none";
                document.getElementById("mariorossi").style.display="none";
            }
        </script>
    </head>
    <body>
        PAGINA PRINCIPALE
        <br>
        <br>
        DA
        <br>
        <br>
        COPRIRE
        
        <iframe id="mariorossi" class="popup" src="../files/iframe.php"></iframe>
        <div id="coprente"></div>
    </body>
</html>

**danielepalmas88** · 16-12-2016, 11:29

Ti ringrazio tantissimo per il tempo e la pazienza che mi stai dedicando.

Direi che allo stato attuale è quasi pronto.
C'è ancora un piccolo problema: così come è scritto il codice, viene coperto anche l'iframe. Ho provato anche a spostarli altrove, ma il risultato non pare cambiare.
Occorre forse definire una sorta di esclusione dell'elemento mariorossi dall'essere affetto da function coprente?

Ho provato anche a ritardare la comparsa dell'iframe di 1 secondo rispetto a quella dell'elemento coprente, ma è stato vano, perché l'iframe compare sempre e solo dietro lo sfondo coprente, non importa se l'elemento iframe sia inserito nel codice al di sotto del div coprente, esso rimane dietro a prescindere.

Poi non ho capito il senso della seguente parte di codice js:
function copri() {
document.getElementById("coprente").style.display= "inline";
document.getElementById("mariorossi").style.display="inlin e";

Come mai hai inserito anche mariorossi nella funzione copri?
E comunque ho notato che anche se decidessi di cancellare la parte in grassetto, non ci sarebbe nessuna variazione finale.

(P.S. La parte della scomparsa l'ho eliminata. Mi son salvato il codice per
eventuale utilizzo futuro, ma per ora non mi serve e, non occorrendomi
nel presente test, ho ovviamente preferito alleggerire)

**autsel** · 16-12-2016, 14:04

L'iframe non viene coperto, solo che se non assegni un colore di sfondo resta "trasparente".

Basta che aggiungi al css popup background-color:#xxxxxx per asegnargli un colore di sfondo.
Eccoti un esempio con lo sfondo bianco.

codice:

.popup { background-color:#FFFFFF; position: absolute;  top: 50%; left: 50%; margin-left: -300px; margin-top: -214px; width:  600px; height: 439px; display: none;  z-index: 100; }

Riguardo al codice js:
"coprente" è chiamiamolo l'oscuramento, che non è altro che un div a piena pagina semitrasparente, in questo caso nero. Potrebbe essere di qualsiasi altro colore.
"mariorossi" è il tuo iframe.
Al caricamento della pagine, tramite css sono entrambi nascosti, perciò assegnando inline all'attributo display rendi visibile lo sfondo che copre tutto, e l'iframe che avendo uno z-index superiore sarà sopra "coprente"

Se togli la parte in grassetto non può funzionare... vedresti solo la pagina coperta e niente iframe.

Allo stesso modo nella funzione scopri assegni all'attributo display il valore "none".

**danielepalmas88** · 16-12-2016, 14:45

Capisco... Fatto sta che continua a rimanere oscurato anche ora, l'iframe.
Potrebbe essere dovuto al fatto che nel .css non ho definito l'elemento #mariorossi?
Ma non credo sia per quello. Le caratteristiche dell'iframe le ho già definite nell'html tramite style, quindi non dovrebbe dipendere da questo.
Bah...

**autsel** · 16-12-2016, 18:15

Cosa hai fatto esattamente nel tuo css non lo so.
Nel codice che ti ho postato ho definito i css sia per "coprente" che per "mariorossi", come pure ho assegnato gli id in modo
corretto. Cerca differenze tra il mio ed il tuo e sistemale

L'unica cosa che ti posso dire è che il codice che ti ho postato io funziona,
anche perché, come sempre quando posto, il codice lo provo prima.

**danielepalmas88** · 17-12-2016, 13:15

ULTIMISSIMA DOMANDA: Ho notato che la funzione "oscura" oscura l'intera pagina, ma facendo scrolling verso il basso, il resto rimane non-oscurato. Per evitare questo che escamotage mi consigli di adottare? Ho provato ad aggiungere la proprietà scrolling: none dentro il css relativo a 'oscura' ma non funge...!

**danielepalmas88** · 17-12-2016, 13:05

Dopo aver buttato ore ed ore come un deficiente, facendo test su test e chiedendomi come mai non andasse...mi sono soltanto alla fine reso conto di aver scritto class"popup" anziché class="popup", quindi mancando l'imput corretto non poteva ovviamente pescare dal css le proprietà del popup.

Ora è tutto perfetto. Ti ringrazio tantissimo per la pazienza e per il tempo dedicatomi.
Buon fine settimana!

**danielepalmas88** · 17-12-2016, 14:58

Risolto: Bastava modificare le proprietà dell'elemento overlay da absolute a fixed.
Buon weekend a tutti!

**autsel** · 17-12-2016, 20:03

Buon lavoro.
P.S.: la proprietà scrolling che sappia io non esiste nei css. Se ne avessi bisogno cerca overflow.

ciao

Discussione: Rendere sottofondo iframe più trasparente inscurito e non cliccabile

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

Permessi di invio