2

可以帮到大家。

所以我使用 jQuery colorbox 并通过单击链接激活它。在颜色框中有一个带有一些复选框的表单，我想做的是在单击提交时将所选复选框的所有值都放入父级（并随后关闭颜色框）。我不希望父窗口刷新。它应该使用内容自动填充“Colorbox 中的复选框项目”

这是链接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时overlay iframe，将这些值添加到父窗口的文本 div 中，然后关闭颜色框窗口。

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 回答