iFrame in overlay a centro pagina

obZen

Nuovo Utente
12 Nov 2014
4
0
0
Ciao ragazzi!
Ho provato lo script descritto in questa guida:
https://www.mrw.it/jquery/iframe-overlay-centrato-schermo_11528.html

Funziona tutto a meraviglia ma vorrei che si aprisse tramite un link e che ogni link apra il proprio iframe (in pratica ho un elenco di nomi ricavato dal database ed ognuno di questi deve aprire il suo relativo iframe). Non sono pratico di Javascript, ho provato a modificare lo script:

Questo è quello originale (si apre automaticamente al caricamento della pagina):
Script:
Codice:
$(document).ready(function(){
    $("#mrw_overlay").fadeIn(500);
    $("#mrw_box").fadeIn(500);
    $("#mrw_close").click(function(){
        $("#mrw_box").fadeOut(500);
        $("#mrw_overlay").fadeOut(500);
    });
});
HTML:
HTML:
         <div id="mrw_overlay"></div><div id="mrw_box"><div id="mrw_close"><img src="images/img_close.png"></div>
  		 <iframe src="scheda.asp" width="950" height="630" marginwidth="0" marginheight="0" frameborder="0" scrolling="auto" allowtransparency="true"></iframe>
		 </div>

Lo script, l'ho modificato così:
Codice:
function clicca(){
    $("#mrw_overlay").fadeIn(500);
    $("#mrw_box").fadeIn(500);
    $("#mrw_close").click(function(){
        $("#mrw_box").fadeOut(500);
        $("#mrw_overlay").fadeOut(500);
    });
}
Richiamato con href="javascript:clicca()" dalla mia pagina.

Fin qui funziona bene ma non riesco a passargli la variabile in modo che ogni link dell'elenco apra il suo iframe.
Ho provato con:
Codice:
function clicca(nomeiframe){
    $(nomeiframe).fadeIn(500);
    $("#mrw_box").fadeIn(500);
    $("#mrw_close").click(function(){
        $("#mrw_box").fadeOut(500);
        $(nomeiframe).fadeOut(500);
    });
}
Richiamato con href="javascript:clicca('#mrw_overlay1')" dalla mia pagina, ma non funziona.

Dove sbaglio?
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, non puoi assegnare lo stesso id a più di un elemento altrimenti lo script va in errore.
Hai creato tanti div overlay quanti sono i link che vuoi far aprire ?
potresti passare un numero alla funzione e concatenarlo con il nome dell'id
HTML:
<a href="javascript:clicca(1)">1</a>
        <a href="javascript:clicca(2)">2</a>
        <a href="javascript:clicca(3)">3</a>
la function diventerebbe cosi
Codice:
function clicca(iframe){
                $("#mrw_overlay_" + iframe).fadeIn(500);
                $("#mrw_box_" + iframe).fadeIn(500);
                $("#mrw_close_" + iframe).click(function(){
                    $("#mrw_box_" + iframe).fadeOut(500);
                    $("#mrw_overlay_" + iframe).fadeOut(500);
                });
            }
 

obZen

Nuovo Utente
12 Nov 2014
4
0
0
Perfetto! Funziona alla grande ed è proprio quello che avevo in testa. Putroppo però ho notato che non posso usare questo tipo di script per la mia pagina perchè dovendo "pre-caricare" tutti gli iframe la pagina diventa lentissima! Arrivo ad avere 10 o 20 record stampati a video e per ognuno dovrebbe corrispondere un'iframe.
Conosci per caso uno script che mi permetta di aprire in overlay (allo stesso modo dello script precedente) una pagina nella quale visualizzo i dati in base alla querystring che le ho inviato?
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Potresti passare come parametro la pagina da aprire nell'iframe
Codice:
<a href="javascript:clicca('scheda.asp?id=1')">1</a>
<a href="javascript:clicca('scheda.asp?id=2')">2</a>
prima di mostrare l'iframe gli cambi il src con jquery
Codice:
function clicca(pagina){
     $("#mrw_overlay").attr("src",pagina);
     $("#mrw_overlay").fadeIn(500);
 
Ultima modifica:

obZen

Nuovo Utente
12 Nov 2014
4
0
0
Non passa la pagina...parte l'overlay ma vuoto, senza che abbia caricato nessuna pagina..
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
devi indicare il percorso giusto del iframe
dovrebbe essere dentro mrw_box
Codice:
$("#mrw_box iframe").attr("src", pagina);
 
Discussioni simili
Autore Titolo Forum Risposte Data
L Iframe a schermo intero HTML e CSS 0
L Sovrascrivere CSS iframe su dominio diverso WordPress 0
A [Java] caricare un url esterno senza utilizzo di iframe Java 0
T [Javascript] Richiamare un file.js (iframe) in html Javascript 1
A [HTML] iframe HTML e CSS 1
Tommy03 [PHP] Iframe Google Maps PHP 1
S Cliccando su iFrame con JavaScript Javascript 2
C [Javascript] [HTML] È possibile "puntare" un iframe? Javascript 14
D [PHP] [RETRIBUITO] cercasi esperto programmatore per realizzare applicazione in html e codice iframe PHP 0
D [RETRIBUITO] cercasi esperto programmatore per realizzare applicazione in html e codice iframe Offerte e Richieste di Lavoro e/o Collaborazione 2
J [HTML] problema IFrame con dispositivi IOS HTML e CSS 0
L Come caricare <iframe> dopo il click ad un immagine, per migliorare le prestazioni. Discussioni Varie 0
G [HTML] Visualizzare iframe in un blog non funziona sempre xchė? HTML e CSS 3
A [RISOLTO] Table elaborata da codice PHP con dati da DB non visualizzata in IFRAME PHP 15
B [PHP] Copiare testo da iframe dopo il caricamento? PHP 1
W [Javascript] Problema: Copiare testo da un iframe? Javascript 4
giannit [HTML] Mettere div al posto di iframe e possibile? HTML e CSS 9
A [Javascript] [HTML] Gestire una pagina esterna con 2 iframe Javascript 4
F [HTML] caricamento iframe HTML e CSS 1
G [Javascript] rendere visibile un iframe dopo l'avvenuto caricamento del video che esso contiene Javascript 4
F [Javascript] Div ed iframe che adatta altezza in base al contenuto Javascript 1
L Eliminare suono da iframe HTML e CSS 3
A Problema con iframe HTML e CSS 4
G Aiuto fancybox e iframe Javascript 4
A centrare iframe con div HTML e CSS 2
M Href in xml verso ancora posta dentro un iframe XML 0
M Problema sorrimento iFrame??? HTML e CSS 4
M Problema con iframe HTML e CSS 4
M aprire Iframe su safari in IOS, (iphone - ipad) HTML e CSS 8
V Posizionare Iframe e menù a discesa HTML e CSS 1
M Nascondere Video e censurare src in tag <iframe> Quale linguaggio consigliate? Discussioni Varie 0
A iframe wp WordPress 3
A problema caricamento codice <iframe video youtube PHP 3
S assegnare src iframe tramite php PHP 3
C [VENDO] Visite per sito tramite iframe - Visite nazionali o internazionali REALI Vendere e Acquistare pubblicita' online 0
danjde inviare dati testuali verso iframe PHP 5
P Alternativa a iframe HTML e CSS 31
S iframe e link da menù HTML e CSS 0
P Include o Require al posto di iframe... PHP 4
filippino Aprire link esterni in iframe HTML e CSS 0
A Come "uscire" da un iframe HTML e CSS 2
A Inquadrare sito in iframe HTML e CSS 3
V Slide iFrame con JQuery e Javascript Javascript 1
E [HTML] Sovrapporre un iframe e un img HTML e CSS 3
Trapano sostituire iframe PHP 5
ivarello iFrame lato server PHP 6
F problema altezza iframe jQuery 0
P Portare fuori il contenuto di una chiamata ajax dentro un iframe Ajax 0
3 iframe e nascondere un div caricato HTML e CSS 5
P Cornice Iframe HTML e CSS 2

Discussioni simili