javascript - JQueryモーダルボックスとIframe

Question

Simple Modalを使用していますが、現時点で必要なものを満たしていないように感じます。

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

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

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

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

Google Codeでこれに関するコードを見つけましたが、動作させることができません（おそらく異なる単純なモーダルバージョン

別のモーダルボックスツールにも変更したいと思います。

アップデート：

ThickboxまたはFancyboxのいずれかが子IFrame要素からのクローズをサポートしていますか？

score 15 · Accepted Answer

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

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

score 13 · Accepted Answer

以下は、コンテンツをiFrameにロードし、iFrameからダイアログを閉じる基本的なダイアログインタラクションです。

これを説明するために、2つのコードスニペットがあることに注意してください。最初のラベルはfile1.htmlです。次に、「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>

score 9 · Accepted Answer

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

編集：

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

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

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

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

score 3 · Accepted Answer

3

parent.$.modal.close();シンプルなモーダルプラグインで動作します。

于 2009-08-18T23:50:44.747 に答える

score 1 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

parent.$.nyroModalRemove();

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

score 0 · Accepted Answer

0

colorboxも試してみてください。

于 2013-02-21T07:25:05.583 に答える

score 0 · Accepted Answer

これは私のために働く...

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

こんにちは、Wordpress 3.0 で Fancy Box を手動でインストールして Fancy Box iFrame を閉じるのに問題がある方:

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

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

できます：）

score 0 · Accepted Answer

0

ThickBoxを試しましたか？

于 2009-02-04T17:04:40.697 に答える

javascript - JQueryモーダルボックスとIframe

11 に答える 11

Related

Reference