可以为你们提供一些帮助。
所以我使用 jQuery colorbox 并通过单击链接激活它。在颜色框中有一个带有一些复选框的表单，我想做的是在单击提交时将所选复选框的所有值获取到父级（并随后关闭颜色框）。我不想刷新父窗口。它应该自动用内容填充“Colorbox 中的复选框项目”
链接在这里http://tdesigns.net84.net/colorbox/example1/ 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 file
首先在该文件中加载 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 on overlay iframe它将所有选中的复选框添加这些值到父窗口的文本 div 中，然后关闭颜色框窗口。
这是修改后的代码ajax.html file
<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/ http://joynag.net/demos/colorbox/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
