jQuery的颜色框的OnClose更新父(jQuery colorbox onclose upda

可以做一些帮助你们。

所以我使用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>

真的很感激，如果我能得到一些帮助与此有关。

提前谢谢了

您可以通过在你的加入以下功能做到这一点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它需要所有选中的复选框添加这些值转换成父窗口的文本格，然后关闭颜色框窗口。

下面是修改后的代码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/

jQuery的颜色框的OnClose更新父(jQuery colorbox onclose upda

Answer 1:

收藏的人(0)

jQuery的颜色框的OnClose更新父(jQuery colorbox onclose upda

Answer 1:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮