Javascript 如何通过单击按钮关闭 jQuery 花式框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4398740/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to close a jQuery fancybox from button click
提问by Rangana Sampath
I'm using fancy boxto create a popup and load another page on it using an iframe. here is my code
我正在使用花式框创建一个弹出窗口并使用 iframe 在其上加载另一个页面。这是我的代码
<script type="text/javascript">
$(document).ready(function() {
$('.calendar .day').click(function() {
day_num = $(this).find('.day_num').html();
day_data = prompt('Enter Stuff', $(this).find('.content').html());
if (day_data != null) {
$.ajax({
url: window.location,
type: 'POST',
data: {
day: day_num,
data: day_data
},
success: function(msg) {
location.reload();
}
});
}
});
});
$(document).ready(function(){
$("a.iframeFancybox1").fancybox({
'width' : 800,
'height' : 650,
'overlayOpacity' : '0.4',
'overlayColor' : '#000',
'hideOnContentClick' : false,
'autoScale' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'type' : 'iframe'
});
});
</script>
It loads the page successfully and does the stuff. But instead of closing the popup form, it loads the popup source form inside the popup itself. I want to close the popup form when the work is done and return to the main menu page from which the popup was generated. How do I achieve this on a button click of the popup form.
它成功加载页面并执行这些操作。但它不是关闭弹出窗体，而是在弹出窗口本身内加载弹出源窗体。我想在工作完成后关闭弹出窗体并返回到生成弹出窗口的主菜单页面。我如何通过单击弹出窗体的按钮来实现这一点。
Regards, Rangana
问候， 兰加纳
回答by Haim Evgi
call to $.fancybox.close();
拨电至 $.fancybox.close();
also look on this answers in the post
也看看帖子中的这个答案
According to http://fancybox.net/faq
- How can I close FancyBox from other element? ?
Just call
$.fn.fancybox.close()on your onClick event
- 如何从其他元素关闭 FancyBox？?
只需调用
$.fn.fancybox.close()您的 onClick 事件
So you should just be able to add in the fn.
所以你应该能够在fn.
回答by Neil
I had to use parent.jQuery.fancybox.close()with my Drupalsite to get this to work properly.
我必须使用parent.jQuery.fancybox.close()我的Drupal站点才能使其正常工作。
回答by Alex
You can use inline call
您可以使用内联调用
<input type="button" onclick="$.fancybox.close()" value="CloseFB" />
Or either you can use function called
或者您可以使用称为
<script>
function closeFB() {
// Before closing you can do other stuff, like page reloading
$("#destination_div").load("?v=staff #source_div_with_content");
// After all you can close FB
$.fancybox.close();
}
</script>
<input type="button" onclick="closeFB()" value="CloseFB" />
Call function in onClickevent
在 onClickevent 中调用函数
回答by Jaz
This is an old thread but I thought I'd share my two cents.
这是一个旧线程，但我想我会分享我的两分钱。
I was having similar issues with closing the fancybox iframe using the onclick event and after many tries, this did the trick for me: window.parent.jQuery.fancybox.close()
我在使用 onclick 事件关闭fancybox iframe 时遇到了类似的问题，经过多次尝试，这对我有用：window.parent.jQuery.fancybox.close()
Here's an example using an input button:
这是使用输入按钮的示例：
<input type="button" class="formbutton" value="Close" onClick="window.parent.jQuery.fancybox.close();" />
As well, I tested the onlick on an anchor (a) tag and it worked fine.
同样，我在锚点 (a) 标签上测试了 onlick，效果很好。
回答by silvenon
$.fn.fancybox.close()doesn't work for version 2.x, in fact, it raises an error. If you're using version 2.x, try $.fancybox.close(true)instead.
$.fn.fancybox.close()不适用于 2.x 版，事实上，它会引发错误。如果您使用的是 2.x 版，请$.fancybox.close(true)改用。
回答by Vladimir Kuzmin
Because of my close button has different functions: close popup, and close fancybox. It needs to use e.stopPropagation() to stop bubbling event;
因为我的关闭按钮有不同的功能：关闭弹窗，关闭fancybox。需要使用 e.stopPropagation() 来停止冒泡事件；
$('.close-btn').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
$(this).parent().hide();
$.fancybox.close();
});
回答by Vladimir Kuzmin
SIMPLE solution, find link to close (it have a class fancibox-close) and do it in 6 seconds (or 6000 miliseconds)
简单的解决方案，找到要关闭的链接（它有一个类 fancibox-close）并在 6 秒（或 6000 毫秒）内完成
setTimeout(function(){
$('.fancybox-close').click();
}, 6000);
回答by Yemmill
This works for me...
这对我有用...
<script type="text/javascript" src="../../js/jquery-ui.js"></script>
<script src="../../js/fancybox-2.1.5/jquery.fancybox.js" type="text/javascript"></script>
<script src="../../js/fancybox-2.1.5/jquery.fancybox.pack.js" type="text/javascript"></script>
<link href="../../js/fancybox-2.1.5/jquery.fancybox.css" rel="stylesheet" type="text/css" />
<script lang="javascript">
var J$ = jQuery.noConflict();
function SelectAndClose() {
txtValue = document.getElementById('<%= _browseTextBox.ClientID %>').value;
window.returnValue = txtValue.value;
var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined'; // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
// At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome && !isOpera; // Chrome 1+
var isIE = /*@cc_on!@*/false || !!document.documentMode; // At least IE6
if (isIE == true) {
//alert("iexcplorer");
parent.J$.fancybox.close();
//document.getElementById("closeFancyInternet").click();//For IExplorer
}
else {
//alert("another one");
document.getElementById("closeFancy").click(); //For Firefox
}
return false;
}
function closeBrowsing() {
document.getElementById("closeFancy").click();
window.close();
return false;
}
</script>
If you want to check your browser must see this link: http://jsfiddle.net/9zxvE/383/
如果你想检查你的浏览器必须看这个链接：http: //jsfiddle.net/9zxvE/383/
回答by Juan Carlos Lechuga
Use event close button of fancybox:
使用fancybox的事件关闭按钮：
document.getElementsByClassName("fancybox-item fancybox-close")[0].click();
