web-dev-qa-db-ja.com

jQueryモーダルボックスとiframe

私はSimple Modalを使用してきましたが、現時点で必要なものに対応できないと感じています。

外部ファイルの読み込みをサポートし、それらの外部ファイルがモーダルボックスを閉じて親ページをいくつかのURLにリダイレクトできるようにするモーダルボックスはありますか？.

私がやりたいことの例。ユーザーのリストがあり、[ユーザーを追加]をクリックすると、フォームが表示されたモーダルボックスがポップアップ表示され、フォームに入力して送信します。これでボックスが閉じ、ユーザーリストページが再読み込みされるので、リストにユーザーが表示されます。

次に、[ユーザーの編集]をクリックすると、フォームフィールドにユーザー情報が入力されたモーダルボックスがポップアップ表示され、編集して送信すると、閉じて更新されます。

これは、ユーザー情報フォームを各ユーザーの非表示のdivとして持っている場合に実行できることはわかっていますが、適切にスケーリングされず、オーバーヘッドデータが大量にあります。

私はいくつかの これについてのGoogle Codeのコード を見つけましたが、それを機能させることができません（おそらく異なる単純なモーダルバージョン

また、別のモーダルボックスツールに変更してもかまいません。

更新：

ThickboxまたはFancyboxのサポートは、子のIFrame要素から閉じられますか？

javascriptjqueryiframerefreshmodal-dialog
19
Ólafur Waage

Fancybox も別のオプションです。 Thickboxと同様に機能します

編集：

遊んでみたところ、プラグインが子iframe要素を介してFancyboxを閉じることをネイティブでサポートしていないようです。これは確かに少しの努力で達成できると思います（私はhacking何かを一緒に始めました here 、これは単なるPOCであり、iframe内のボタンがDOMからfancybox divラッパーを削除するため機能しないため、もう一度Google画像をクリックしても表示されません） 。しかし、iframeがダウンするのに適切な行であるかどうか疑問に思っています。

ユーザーを追加する場合、[サインイン]をクリックすると表示される Monsterサイトのようなモーダルフォームをユーザーに提示できると思います。 クリックするとユーザーを追加し、AJAXを呼び出して新しいユーザーを挿入し、成功した場合は、ページの更新を開始するか、AJAX toリストを更新します。

ユーザーを編集する場合、ユーザーが選択されたら、AJAXを呼び出してユーザーIDを呼び出し、モーダルフォームにデータソースから取得したユーザーの詳細をAJAX呼び出しは成功を返します。ユーザーの編集が終了したら、AJAX呼び出しを行ってデータソースを更新してから、ページの更新を開始するか、AJAXリストを更新します。

ページの更新または最終的なAJAX呼び出しの代わりに、各シナリオで、JavaScript/jQueryを使用して、ユーザーが追加されたか編集されたかに応じて、リスト/リストの詳細をそれぞれ更新できます。

9
Russ Cam

すでに答えを見つけたようですが、他の人のために、iFrameで次のJavaScriptを使用してFancyBoxのiFrame実装を閉じることができます。

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

以下は、コンテンツをiFrameにロードし、iFrameからダイアログを閉じる基本的なダイアログの相互作用です。

これを説明するために、2つのコードスニペットがあることに注意してください。最初のラベルはfile1.htmlです。 2つ目は、機能させて最初のファイルと同じディレクトリに配置する場合は、「myPage.html」という名前を付ける必要があります。

ダイアログを閉じる呼び出しは、必要な機能に応じて他の方法で使用できることに注意してください。たとえば、別の例としては、フォーム送信の成功があります。

システムでローカルにファイルを作成し、file1.htmlを開いて試してください。

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();は単純なモーダルプラグインで機能します。

3
Francisco

これは、firebugでトレースしたときのダイアログのスクリプトです

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

ダイアログスクロールは常に画面に表示されるため、高さを95％に変更する必要がありますT.T

1
sting

私は私のための解決策を見つけました、それはnyroModalを使用しています。このコードでは、iframeとそのiframe子を介したモーダルの終了をサポートしています。

parent.$.nyroModalRemove();

Russ Camの回答を受け入れて、より多くの担当者を提供します。彼の回答により、これがどのように機能するかについて多くのことを考えさせられ、最終的に私は答えを見つけました。

1
Ólafur Waage

ThickBox を試しましたか？

0
mathieu

私のFrameDialogはこれを可能にします、それは基本的にDialogで拡張されます...同じドメインを使用している場合、$。FrameDialog.close（）を呼び出すことができるはずですが、リダイレクトしている場合は、単純にリダイレクトできます親。 window.parent.locationが行います。

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

0
Tracker1

こんにちは、Wordpress 3.0：

このリンクをiframeで使用します。

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

できます ：）

0
dave

これは私にとってはうまくいきます...

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

試してみてください colorbox それも良いものです。

0
235