wake-up-neo.com

JQuery Modal Boxes und Iframe

Ich habe Simple Modal verwendet und finde, dass es nicht dem entspricht, was ich im Moment brauche.

Gibt es eine modale Box, die das Laden externer Dateien unterstützt, und dass diese externen Dateien die modale Box schließen und die übergeordnete Seite zu einer bestimmten URL umleiten können?.

Ein Beispiel dafür, was ich tun möchte. Sie haben eine Liste von Benutzern, Sie können auf "Benutzer hinzufügen" klicken und eine modale Box mit dem Formular wird angezeigt. Sie füllen das Formular aus und senden es ab. Dadurch würde das Feld geschlossen und die Benutzerlistenseite neu geladen, sodass der Benutzer in der Liste angezeigt wird.

Dann könnten Sie auf "Benutzer bearbeiten" klicken und eine modale Box mit den in die Formularfelder ausgefüllten Benutzerinformationen würde auftauchen und Sie könnten sie bearbeiten, absenden und sie schließen und aktualisieren.

Ich weiß, dass dies möglich ist, wenn ich das Benutzerinformationsformular als verstecktes Div für jeden Benutzer habe, aber dies lässt sich nicht gut skalieren und es gibt viele Overhead-Daten.

Ich habe etwas Code dazu in Google Code gefunden , kann es aber einfach nicht zum Laufen bringen (möglicherweise andere einfache modale Version)

Ich bin auch bereit, zu einem anderen modalen Box-Tool zu wechseln.

AKTUALISIEREN:

Wird die Unterstützung von Thickbox oder Fancybox von einem untergeordneten IFrame-Element geschlossen?

18
Ólafur Waage

Fancybox ist auch eine andere Option. Funktioniert ähnlich wie Thickbox

EDIT:  

Nach einiger Zeit scheint es so, dass das Plugin das Schließen der Fancybox durch ein untergeordnetes iframe-Element nicht unterstützt. Ich denke, dass dies sicherlich mit etwas Mühe erreichbar ist (ich habehackingzusammen etwas hier , obwohl ich betone, dass dies einfach ein POC war und nicht wie das funktioniert Die Schaltfläche innerhalb des iframe entfernt den Fancybox-Div-Wrapper aus dem DOM und wird daher nicht angezeigt, wenn Sie erneut auf das Google-Bild klicken.) Ich frage mich jedoch, ob ein iframe die richtigen Zeilen enthält.

Wenn Sie einen Benutzer hinzufügen, könnte ich mir vorstellen, dass Sie dem Benutzer ein modales Formular wie das auf der Monster-Site präsentieren könnten, das Sie erhalten, wenn Sie auf "Anmelden" klicken. Wenn Sie auf "Benutzer hinzufügen" geklickt haben, rufen Sie Ihre Datenquelle mit einem AJAX -Aufruf an, um einen neuen Benutzer einzufügen. Wenn Sie erfolgreich sind, können Sie entweder eine Seitenaktualisierung einleiten oder AJAX zum Aktualisieren verwenden Die Liste.

Wenn Sie einen Benutzer bearbeiten, können Sie nach Auswahl eines Benutzers einen AJAX-Aufruf mit einer Benutzer-ID ausführen, um ein modales Formular mit den aus Ihrer Datenquelle abgerufenen Benutzerdetails auszufüllen, wenn das AJAX Call gibt Erfolg zurück. Nachdem Sie den Benutzer bearbeitet haben, führen Sie einen Aufruf von AJAX aus, um Ihre Datenquelle zu aktualisieren, und initiieren Sie erneut eine Seitenaktualisierung oder verwenden Sie AJAX, um die Liste zu aktualisieren.

Anstelle der Seitenaktualisierung oder des abschließenden AJAX-Aufrufs in jedem Szenario können Sie einfach JavaScript/jQuery verwenden, um die Listen-/Listendetails zu aktualisieren, je nachdem, ob ein Benutzer hinzugefügt oder bearbeitet wurde.

9
Russ Cam

Klingt, als hätten Sie bereits die Antwort gefunden, aber zum Vorteil anderer können Sie eine iFrame-Implementierung von FancyBox schließen, indem Sie das folgende JavaScript im iFrame verwenden:

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

Nachfolgend finden Sie eine grundlegende Dialoginteraktion, bei der Inhalte in einen iFrame geladen werden und der Dialog dann vom iFrame aus geschlossen wird.

Um dies zu veranschaulichen, habe ich zwei Codeausschnitte. Der erste heißt file1.html. Das zweite sollten Sie "myPage.html" nennen, wenn Sie möchten, dass es funktioniert und es in demselben Verzeichnis wie die erste Datei ablegt.

Beachten Sie, dass der Aufruf zum Schließen des Dialogs je nach gewünschter Funktionalität auf andere Weise verwendet werden kann. Ein anderes Beispiel könnte beispielsweise die erfolgreiche Übermittlung von Formularen sein.

Erstellen Sie die Dateien lokal auf Ihrem System, öffnen Sie file1.html und probieren Sie es aus.

file1.html

<html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css"/>
    <script type="text/javascript">
      $(document).ready(function() {
            $("#modalDiv").dialog({
                modal: true,
                autoOpen: false,
                height: '180',
                width: '320',
                draggable: true,
                resizeable: true,   
                title: 'IFrame Modal Dialog'
            });
            $('#goToMyPage').click(
                function() {
                    url = 'myPage.html';
                    $("#modalDiv").dialog("open");
                    $("#modalIFrame").attr('src',url);
                    return false;
            });                 
      });
    </script>
    </head>
    <body>
        <a id="goToMyPage" href="#">Go to My Page</a>
        <div id="modalDiv"><iframe id="modalIFrame" width="100%" height="100%" marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto" title="Dialog Title"></iframe></div>
    </body>
</html>

myPage.html

<html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css"/>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#clickToClose').click(
                function() {
                    window.parent.$("#modalDiv").dialog('close');
                    return false;
            });
            // uncomment and use the below line close when document is ready (no click action by user needed)
            // the same call could be put elsewhere depending on desired functionality (after successful form submit, etc.)
            // window.parent.$("#modalDiv").dialog('close');                    
        });
    </script>
    </head>
    <body>
        <a id="clickToClose" href="#">Click to close.</a>
    </body>
</html>
13
Josh Metcalfe

parent.$.modal.close(); funktioniert für einfaches modales Plugin.

3
Francisco

dies ist das Skript des Dialogs, als ich mit Firebug verfolgt wurde 

<iframe> 
       scrolling="auto" 
       height="100%" 
       frameborder="0" 
       width="100%" 
       title="Dialog Title" 
       marginheight="0" 
       marginwidth="0" 
       id="modalIFrame"
       src="test.php" 
</iframe>

ich muss die Höhe auf 95% ändern, da der Dialog immer im Bildschirm sichtbar ist. T.T

1
sting

Ich habe die Lösung für mich gefunden, sie verwendet nyroModal. Es unterstützt Iframes und das Schließen des Modals durch sein Iframe-Kind mit diesem Code.

parent.$.nyroModalRemove();

Ich werde die Antwort von Russ Cam akzeptieren, um ihm mehr Wiederholungen zu geben, da er mich dazu veranlasst hat, viel darüber nachzudenken, wie das funktionieren wird, und schließlich die Antwort gefunden zu haben.

1
Ólafur Waage

Hast du ThickBox probiert?

0
mathieu

Mein FrameDialog lässt dies zu, er erweitert sich im Wesentlichen auf den Dialog ... Wenn Sie dieselbe Domäne verwenden, sollten Sie $ .FrameDialog.close () aufrufen können. Wenn Sie jedoch umleiten, können Sie einfach umleiten das Elternteil. window.parent.location reicht aus.

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

0
Tracker1

HI, Jeder, der Probleme hat, einen Fancy Box-iFrame mithilfe einer manuellen Installation von Fancy Box in Wordpress 3.0 zu schließen:

Verwenden Sie diesen Link in Ihrem iframe:

<a href="#" onClick="parent.jQuery.fancybox.close();" title="Close window">close fancybox</a>

Es klappt :)

0
dave

Das funktioniert für mich ...

<input name="Envoyer" value="Annuler" type="button" onclick="javascript:window.parent.$.fancybox.close();" />
0
Matthieu

Versuchen Sie colorbox es ist auch eine gute.

0
235