JQuery Modal Boxes e Iframe

Ho usato Simple Modal e sento che non è all’altezza di ciò di cui ho bisogno al momento.

Esiste una casella modale che supporta il caricamento di file esterni e consente a tali file esterni di chiudere la casella modale e di redirect la pagina padre in qualche URL.

Un esempio di ciò che voglio fare. Hai un elenco di utenti, puoi fare clic su “Aggiungi utente” e una casella modale con il modulo che si apre, la inserisci e la invii. Quello chiuderebbe la scatola e ricaricherà la pagina di lista degli utenti in modo da vedere l’utente nella lista.

Quindi è ansible fare clic su “Modifica utente” e una casella modale con le informazioni utente riempite nei campi del modulo si aprirà e si potrebbe modificare, inviare e chiudere e aggiornare.

So che questo può essere fatto se ho il modulo di informazioni utente come un div nascosto per ogni utente, ma questo non scalerà bene ed è un sacco di dati generali.

Ho trovato del codice su questo codice su Google Code ma non riesco a farlo funzionare (probabilmente una versione modale semplice diversa

Sono disposto a passare anche a un altro strumento modale.

AGGIORNARE:

Il supporto di Thickbox o Fancybox viene chiuso da un elemento IFrame secondario?

Fancybox è anche un’altra opzione. Funziona in modo simile a Thickbox

MODIFICARE:

Appare dopo aver provato che il plugin non supporta nativamente la chiusura di Fancybox attraverso un elemento iframe secondario. Penso che questo sia certamente realizzabile con un piccolo sforzo (ho iniziato a hackerare insieme qualcosa qui , anche se sottolineo che si trattava semplicemente di un POC e non funziona in quanto il pulsante all’interno dell’iframe rimuove il wrapper div di fancybox dal DOM e quindi non lo fa mostra quando fai di nuovo clic sull’immagine di google). Mi chiedo tuttavia, se un iframe è la linea giusta per andare giù.

Per aggiungere un utente, il mio pensiero sarebbe che potresti presentare all’utente un modulo modale come quello sul sito di Monster che ottieni quando fai clic su “Accedi”. Dopo aver fatto clic su aggiungi utente, effettuare una chiamata AJAX all’origine dati per inserire un nuovo utente e quindi al rientro, è ansible avviare un aggiornamento della pagina o utilizzare AJAX per aggiornare l’elenco.

Per modificare un utente, una volta selezionato un utente, è ansible effettuare una chiamata AJAX con un id utente per compilare un modulo modale con i dettagli dell’utente recuperati dall’origine dati quando la chiamata AJAX restituisce esito positivo. Una volta che hai finito di modificare l’utente, effettua una chiamata AJAX per aggiornare l’origine dati e poi di nuovo, avvia un aggiornamento della pagina o usa AJAX per aggiornare l’elenco.

Invece dell’aggiornamento della pagina o della chiamata finale AJAX in ogni scenario, è ansible utilizzare semplicemente JavaScript / jQuery per aggiornare i dettagli dell’elenco / elenco, a seconda che un utente sia stato aggiunto o modificato, rispettivamente.

Sembra che tu abbia già trovato la risposta, ma a beneficio degli altri puoi chiudere un’implementazione iFrame di FancyBox utilizzando il seguente JavaScript nell’iFrame:

parent.$.fn.fancybox.close(); 

Di seguito è riportata un’interazione di dialogo di base che carica il contenuto in un iFrame e quindi chiude la finestra di dialogo dall’iFrame.

Si noti che per illustrare questo ho due frammenti di codice. Il primo è etichettato file1.html. Il secondo dovresti nominare “myPage.html” se vuoi che funzioni e inserirlo nella stessa directory del primo file.

Si noti che la chiamata per chiudere la finestra di dialogo potrebbe essere utilizzata in altri modi a seconda della funzionalità desiderata. Ad esempio, un altro esempio potrebbe essere relativo all’invio di moduli di successo.

Crea i file localmente sul tuo sistema e apri file1.html e provalo.

file1.html

         Go to My Page 

myPage.html

        Click to close.   

parent.$.modal.close(); funziona per un semplice plugin modale.

Ho trovato la soluzione per me, sta usando nyroModal. Supporta iframe e la chiusura della modal attraverso il suo iframe child con questo codice.

 parent.$.nyroModalRemove(); 

Accetterò la risposta di Russ Cam per dargli più rappresentanti dal momento che la sua risposta mi ha fatto riflettere su come funzionerà e alla fine mi ha fatto trovare la risposta.

questo è lo script del dialogo quando ho tracciato con firebug

  

ho bisogno di cambiare altezza al 95%, perché la finestra di scorrimento scorre sempre visibile nella schermata TT

Hai provato ThickBox ?

Il mio FrameDialog lo consentirà, sostanzialmente si estende sulla finestra di dialogo … se stai usando lo stesso dominio, dovresti essere in grado di chiamare $ .FrameDialog.close (), però, se stai reindirizzando, puoi semplicemente redirect il genitore. window.parent.location farà.

http://plugins.jquery.com/project/jquery-framedialog

HI, chiunque abbia problemi a chiudere un Fancy Box iFrame utilizzando un’installazione manuale di Fancy Box in WordPress 3.0:

Usa questo link nel tuo iframe:

 close fancybox 

Funziona 🙂

Questo funziona per me …

  

Prova colorbox , è anche una buona soluzione.