Rendere sottofondo iframe più trasparente inscurito e non cliccabile

[danielepalmas88]

Potreste dirmi i parametri che devo aggiungere al codice js di un iframe per far sì che 1) il sottofondo della pagina (tutta la parte di schermo esterna al riquadro centrale che è rappresentato dall'iframe) risulti trasparente ma un po' oscurato e 2) che qualsiasi cosa si clicchi di tale sottofondo (pulsanti, link iperstestuali ecc.) non sia cliccabile...?

Thanks

<p><iframe id="blablabla" style="width:600px;height:439px;position:absolute; display:none; top:275px;left:500px" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" frameborder="0" src="iframe.php"></iframe></p>

(Per spiegare meglio. Ho un iframe che compare a centro pagina dopo X secondi. Chiedendo registrazione a newsletter. Ma siccome col codice attuale si può navigare nei menu della pagina anche dopo la comparsa di tale iframe, allora vorrei che dopo tale comparsa il resto dello schermo non fosse cliccabile, e rendere la trasparenza di sottofondo un po' più oscurata)

[cavicchiandrea]

Sempre che abbia capito, studiati il sorgente di questa pagina http://webprogetti.it/oscurapagina.asp

[danielepalmas88]

Sì esatto grazie cerco una roba simile. Sinceramente non mi piace però come è impostato lo script che mi hai linkato.
Ma non esiste proprio un parametro style opacity:x%?

[cavicchiandrea]

Non capisco cosa intendi vedi http://www.w3schools.com/css/css_image_transparency.asp

[danielepalmas88]

Intendo nel senso che se nello style c'è allowtransparency:true magari potrebbe esserci anche opacity:50% (spero) e se così fosse lo preferirei come soluzione rispetto al definire tutto nel js come nell'esempio di quella pagina che mi hai linkato ieri notte.

Nel caso non mi fossi spiegato bene nella domanda iniziale, ecco uno schizzo di ciò che esattamente ho e ciò che esattamente vorrei...

[cavicchiandrea]

Non so che dire, o l'opacity lo imposti da css o da js valuta tu qual'è la strada migliore.

[autsel]

Devi impostare anche z-index nel css
Per esempio...
z-index=1 per la pagina
z-index=50 per lo sfondo "coprente"
z-index=100 per la popup

css:

div#pagina {z-index:1; }

div#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; }

div#popup { position: absolute; top: 50%; left: 50%; margin-left: -250px; margin-top: -150px; width: 500px; height: 300px; background-image:url('$css_messagepopupbkg'); display: none;  z-index: 100; }

In definitiva.... questo è un aiutino.... quando ti serve la popup rendi visibile sia il div coprente che la popup, quando non ti serve più li rendi invisibili.
Cerca in giro css z-index, opacity e filter.... fai le modifiche che devi e funzionerà tutto.

Ciao

[danielepalmas88]

Salve ragazzi, riesumo questo post perché mi sto cimentando a fare ciò che mi avete suggerito, seppur partendo dalle mie non-conoscenze del codice.

Avrei quindi un altro ennesimo aiutino da chiedervi...

Premetto che ho preso un codice da un sito americano che presentava una pagina con videoplayer in flash, il quale ad un certo punto interrompeva il flusso video, mostrando un popup e - proprio come serve a me - oscurando il resto della pagina al di fuori dell'iframe, mediante z-index, e rendendo i tutti i link del sottofondo non-cliccabili.

Ecco il codice:

PARTE STYLE.CSS
#iframe{width:600px; height:439px;}
.white_content {display: none; position: absolute;width: 600px;height: 139px;top: 10%;left: 28%;z-index:1002;text-align: center; padding-top: 37px;}
.black_overlay{display: none; position: absolute;top: 0;left: 0;right: 0;bottom: 0; width: 100%;height: 100%;background-color: black;z-index:1001;-moz-opacity: 0.75;opacity:.75;filter: alpha(opacity=75);}

PARTE HTML
<div id="popup_container" class="white_content">
<div id="iframe">
<iframe src="redx.php" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" frameborder="0" width="600px" height="439px"  scrolling="no"></iframe>
</div>
</div>
<div id="popup_background" class="black_overlay"></div>

PARTE FILE .JS
function loading_DoFSCommand(_0xeb6ax2, _0xeb6ax3) {
if (_0xeb6ax2 == 'block1') {} else {
if (_0xeb6ax2 == 'block2') {
document['getElementById']('popup_container')['style']['display'] = 'block';
document['getElementById']('popup_background')['style']['display'] = 'block';
setInterval('scroll(0,0)', 300);
};
};
};
if (AC_FL_RunContent == 0) {
alert('This page requires AC_RunActiveContent.js.');
} else {
AC_FL_RunContent('codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0', 'width', '850', 'height', '400', 'src', 'loading', 'quality', 'high', 'pluginspage', 'http://www.macromedia.com/go/getflashplayer', 'align', 'middle', 'play', 'true', 'loop', 'true', 'scale', 'showall', 'wmode', 'transparent', 'devicefont', 'false', 'id', 'loading', 'bgcolor', '#000000', 'name', 'loading', 'menu', 'true', 'allowFullScreen', 'false', 'allowScriptAccess', 'sameDomain', 'movie', 'loading', 'salign', '');
};

A me piacerebbe eliminare tutta la parte in JS, e trasferire il codice che definisce gli elementi "popup_container" e "popup_background" direttamente dentro lo style.css

Sto andando per tentativi, ma ognuno risulta vano perché purtroppo mi mancano proprio le competente, per cui non riuscendo a definire popup_container e popup_background il mio iframe funziona, ma senza trasparenze z-index

Potreste aiutarmi a venirne fuori?

[autsel]

Non capisco... il codice css che ti ho postato sopra è già apposto, devi solo modificare le dimensioni ed il posizionamento del div (o dell'iframe nel caso il codice sia riferito all'iframe).
Tramite javascript devi solo andare a modificare la proprietà css display da "none" a "inline" (e viceversa) a seconda di cosa vuoi visibile e cosa no..

[danielepalmas88]

Scusami ma davvero non riesco a capire... Forse dai per scontato che io sia in grado di scrivere un js, ma purtroppo se non lo copio da un sito pre-esistente non mi riesce.
Già CavicchiAndrea mi aveva dato un eccellente esempio, linkandomi una pagina bella e pronta, ma essendo tale js diverso dal mio, non sono stato in grado di riadattarlo alle mie esigenze.
E idem il tuo aiuto, dando per scontata la parte "tecnica", è stato parzialmente vano, perché non sono stato in grado di metterlo in pratica.

Allora dunque, usando il tuo codice di esempio, mi blocco a questo punto, e non riesco ad andare oltre:

STYLE.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: -250px; margin-top: -150px; width:  500px; height: 300px; background-image:url('$css_messagepopupbkg');  display: none;  z-index: 100; }

<header>
<script type="text/javascript">window.onload= function(){setTimeout('document.getElementById("mariorossi").style.display="block"',11000)}</script>
</header>

<body>
<iframe id="mariorossi" class="popup" style="width:600px;height:439px;position:absolute; display:none; top:260px;left:180px" marginwidth="0" marginheight="0" vspace="0"  hspace="0" allowtransparency="true" frameborder="0" scrolling="no" src="../files/iframe.php"></iframe>
<div id="Tabella/SagomaConStesseCoordinateEDimensioneDellIFRAMEsoprastante??" class="coprente"></div>

</body>