2

皆さんの助けがあればできます。

だから私はjQueryカラーボックスを使用しており、リンクをクリックするとアクティブになります。カラーボックスには、いくつかのチェックボックスを含むフォームがあります。私がしたいのは、送信がクリックされたときに、選択したチェックボックスのすべての値を親に取得することです(その後カラーボックスを閉じます)。親ウィンドウを更新したくありません。「カラーボックスのチェックボックス項目」に内容が自動的に入力されるはずです

ここにリンクがありますhttp://tdesigns.net84.net/colorbox/example1/

Parent code

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'/>
        <title>ColorBox Examples</title>
        <style>
            body{font:12px/1.2 Verdana, sans-serif; padding:0 10px;}
            a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
            h2{font-size:13px; margin:15px 0 0 0;}
        </style>
        <link rel="stylesheet" href="colorbox.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="../colorbox/jquery.colorbox.js"></script>
        <script>
            $(document).ready(function(){
                $(".iframe").colorbox({iframe:true, width:"400px", height:"400px"});                
            });
        </script>
    </head>
    <body>
        <p><a class='iframe' href="../content/ajax.html">Outside Webpage (Iframe)</a></p>
        <p>
            Checkbox Items from Colorbox
        </p>
    </body>
</html>

popup code

<form action="" method="post">
    Choose a country 
    <br /><br />
    <input type="checkbox" name="countryCheckbox[]" value="UK" />UK<br />
    <input type="checkbox" name="countryCheckbox[]" value="USA" />USA<br />
    <input type="checkbox" name="countryCheckbox[]" value="Japan" />Japan<br />
    <input type="checkbox" name="countryCheckbox[]" value="China" />China<br />
    <input type="checkbox" name="countryCheckbox[]" value="Australia" />Australia
    <br /><br />
    <input type="submit" name="formSubmit" value="Submit" />
</form>

これについて何か助けがあれば本当にありがたいです。

よろしくお願いします

4

1 に答える 1

6

ajax.htmlこれを行うには、ファイルに次の関数を追加します

最初にそのファイルに jQuery をロードしてから、このドキュメント準備完了関数を追加します

$(document).ready(function(){
        $('#form').submit(function(){

                    $('input:checkbox:checked').each(function(){
                        window.parent.$("#text").text(parent.$("#text").text() + $(this).val()+" ,");

                    });
                    parent.$.colorbox.close();
                    return false;
        });             
    });

これが行っていることは、ユーザーがチェックボックスをすべてsubmit buttonオンにしてクリックすると、それらの値が親ウィンドウのテキスト div に追加され、カラーボックス ウィンドウが閉じられることです。overlay iframe

ajax.htmlファイルの変更されたコードは次のとおりです

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<form action="" method="post" id='form'>
    Choose a country 
    <br /><br />
    <input type="checkbox" name="countryCheckbox[]" value="UK" />UK<br />
    <input type="checkbox" name="countryCheckbox[]" value="USA" />USA<br />
    <input type="checkbox" name="countryCheckbox[]" value="Japan" />Japan<br />
    <input type="checkbox" name="countryCheckbox[]" value="China" />China<br />
    <input type="checkbox" name="countryCheckbox[]" value="Australia" />Australia
    <br /><br />
    <input type="submit" name="formSubmit" value="Submit" />
</form>

<script>
    $(document).ready(function(){
        $('#form').submit(function(){

                    $('input:checkbox:checked').each(function(){
                        window.parent.$("#text").text(parent.$("#text").text() + $(this).val()+" ,");

                    });
                    parent.$.colorbox.close();
                    return false;
        });             
    });
</script>

また、このように値が追加される段落に id を追加します

<p id="text">
    Checkbox Items from Colorbox: 
</p>

からコードを実行する必要があります。そうしないと、からの親へのアクセスが許可さlocalhostれvirtualhostませんchild iframe。変更したファイルをフォルダーにドロップし、document rootブラウザーからアクセスするだけです。それが機能するかどうか教えてください。

ここに動作するデモがありますhttp://joynag.net/demos/colorbox/

于 2012-05-18T15:36:20.943 に答える