我正在使用最新的fancybox(2.0.4),我为iframe创建了一个fancybox。内容显示正确。我在我的html中添加一个“关闭”按钮,该按钮在iframe中显示。我希望关闭按钮与点击fancybox右上角的“x”具有相同的结果。我熟悉FancyBox iframe returns parent.$ as undefined (using WordPress),而我的parent
是一个没有任何内容的DOM对象。也尝试了
window.parent.jQuery.fancybox.close();
window.parent.jQuery.fn.fancybox.close();
parent.jQuery.fn.fancybox.close();
parent.jQuery.fancybox.close();
任何帮助?
更新:
$(document).ready(function() {
$(".fancybox").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
type : 'iframe',
openEffect : 'none',
closeEffect : 'none',
afterClose : function() {
window.location.reload();
}
});
});
<a class="fancybox fancybox.iframe" id="newLink" href="new.html">link</a>
如何在new.html
内设置关闭fancybox iframe窗口的按钮
更新:完整的html文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="fancybox/jquery.fancybox.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/jquery.fancybox.pack.js?v=2.0.4"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
type : 'iframe',
openEffect : 'none',
closeEffect : 'none',
afterClose : function() {
window.location.reload();
}
});
});
</script>
</head>
<body>
<a class="fancybox fancybox.iframe" id="newLink" href="b.html">link</a>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="fancybox/jquery.fancybox.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/jquery.fancybox.pack.js?v=2.0.4"></script>
</head>
<body>
<input type="submit" value="Cancel" id="cancelBtn" onclick="parent.jQuery.fancybox.close()"/>
</body>
</html>
答案 0 :(得分:30)
您的手动关闭按钮应如下所示:
<a href="javascript:parent.jQuery.fancybox.close();"><img src="myCloseButton.png" alt="close fancybox" /></a>
更新:您应该使用onsubmit
标记上的<form>
,而不是button
图片上的<form id="login_form" action="process.php" onsubmit="javascript:parent.jQuery.fancybox.close();">
,所以在您的&#34; new.html&#中34;设置类似
{{1}}
更新#2 :请参阅working demo page
更新#3 :我已经决定删除我对此答案的所有其他评论,因为讨论时间过长而且无处可去。如果这可以帮助其他人,我会让代码和工作演示的链接。
答案 1 :(得分:2)
try{
parent.jQuery.fancybox.close();
}catch(err){
parent.$('#fancybox-overlay').hide();
parent.$('#fancybox-wrap').hide();
}
!!!不支持onClose !!!
答案 2 :(得分:-1)
在Javascript中试试这个:
$ fancybox.close();