Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 19
  1. #1
    Utente di HTML.it
    Registrato dal
    Nov 2010
    residenza
    Cagliari
    Messaggi
    198

    Rendere sottofondo iframe più trasparente inscurito e non cliccabile

    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)
    Ultima modifica di danielepalmas88; 05-11-2016 a 15:00

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    Sempre che abbia capito, studiati il sorgente di questa pagina http://webprogetti.it/oscurapagina.asp
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    Utente di HTML.it
    Registrato dal
    Nov 2010
    residenza
    Cagliari
    Messaggi
    198
    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%?

  4. #4
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  5. #5
    Utente di HTML.it
    Registrato dal
    Nov 2010
    residenza
    Cagliari
    Messaggi
    198
    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...


  6. #6
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    Non so che dire, o l'opacity lo imposti da css o da js valuta tu qual'è la strada migliore.
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  7. #7
    Utente di HTML.it
    Registrato dal
    Nov 2002
    residenza
    Brescia
    Messaggi
    81
    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:

    codice:
    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
    Ultima modifica di autsel; 08-11-2016 a 13:49

  8. #8
    Utente di HTML.it
    Registrato dal
    Nov 2010
    residenza
    Cagliari
    Messaggi
    198
    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:

    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?

  9. #9
    Utente di HTML.it
    Registrato dal
    Nov 2002
    residenza
    Brescia
    Messaggi
    81
    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..

  10. #10
    Utente di HTML.it
    Registrato dal
    Nov 2010
    residenza
    Cagliari
    Messaggi
    198
    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:

    codice:
    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>
    Ultima modifica di danielepalmas88; 15-12-2016 a 16:48

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.