Javascript 如何打开一个fancybox窗口（不是onclick）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8589881/
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 just open a fancybox window (not onclick)
提问by Toni Michel Caubet
I am triggering the fancybox to open onclicklike this:
我触发fancyboxonclick像这样打开：
$('.telefonosOtrosPaises').fancybox({
'type' : 'iframe',
'href' : 'http://es.solmelia.com/nMenus/jsp/telefonosOtrosPaises.jsp',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
/*'easingIn' : 'easeInOutBack',
'easingOut' : 'easeInOutBack', */
/*onComplete : function(){ $('#fancybox-content').css({'height':'380px','width':'570px','background':'white','padding':'20px'})}*/
onComplete : function(){ $('#fancybox-content').css({'width':'630px','background':'white','paddingTop':'15px'})}
});
but how can i just open it in my js code when i need it?
但是我怎么能在我需要的时候在我的 js 代码中打开它呢？
回答by Adam Hopkinson
Instead of calling .fancyboxon an element, call it like this:
不要调用.fancybox元素，而是像这样调用它：
$.fancybox.open(...)
Notethis is fancybox 2 syntax, although it might work with v1
请注意，这是fancybox 2 语法，尽管它可能适用于 v1
If you want to have it open on both onclickand when prompted in your code, just call clickon the element you've attached it to.
如果您希望onclick在代码中提示时打开它，只需调用click已附加到的元素即可。
$('.telefonosOtrosPaises').click();
回答by Teun Pronk
you can just call yourControl.click()to simulate a click event.
您只需调用yourControl.click()即可模拟单击事件。
That way you can call it whenever you want it :)
这样你就可以随时调用它:)
回答by Ayman Safadi
According to Fancybox's blog, you can try something like this:
根据Fancybox 的博客，您可以尝试以下操作：
$.fancybox(
$('.telefonosOtrosPaises'),
{
'type' : 'iframe',
'href' : 'http://es.solmelia.com/nMenus/jsp/telefonosOtrosPaises.jsp',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
/*'easingIn' : 'easeInOutBack',
'easingOut' : 'easeInOutBack', */
/*onComplete : function(){ $('#fancybox-content').css({'height':'380px','width':'570px','background':'white','padding':'20px'})}*/
onComplete : function(){ $('#fancybox-content').css({'width':'630px','background':'white','paddingTop':'15px'})}
}
);
回答by xyzzy.rad
This can be done very easily:
这可以很容易地完成：
<div id="divFancy" style="display: none;">
FANCY BOX CONTENT GOES HERE
</div>
<script type="text/javascript">
$(document).ready(function () {
$.fancybox({
'href': '#divFancy'
});
});
</script>
回答by themhz
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('#target').click(function() {
$('.telefonosOtrosPaises').fancybox({
'type' : 'iframe',
'href' : 'http://es.solmelia.com/nMenus/jsp/telefonosOtrosPaises.jsp',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
/*'easingIn' : 'easeInOutBack',
'easingOut' : 'easeInOutBack', */
/*onComplete : function(){ $('#fancybox-content').css({'height':'380px','width':'570px','background':'white','padding':'20px'})}*/
onComplete : function(){ $('#fancybox-content').css({'width':'630px','background':'white','paddingTop':'15px'})}
});
});
});
</script>
<input type="button" id="target" value="press me"/>
</body>
</html>
