如何打开一个fancybox窗口(不是onclick)

时间:2011-12-21 12:31:46

标签: javascript jquery fancybox

我正在触发fancybox打开onclick,如下所示:

$('.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'})}
});

但我怎么能在需要时在我的js代码中打开它?

5 个答案:

答案 0 :(得分:7)

不要在元素上调用.fancybox,而是像这样调用它:

$.fancybox.open(...)

注意这是fancybox 2语法,虽然它可能适用于v1

如果您想在onclick上同时打开它,并在代码中出现提示时,只需在您附加的元素上调用click

$('.telefonosOtrosPaises').click();

答案 1 :(得分:1)

您只需致电yourControl.click()即可模拟点击事件。

这样你可以随时调用它:)

答案 2 :(得分:1)

根据Fancybox's blog,你可以尝试这样的事情:

$.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'})}
    }
);

答案 3 :(得分:1)

这可以很容易地完成:

   <div id="divFancy" style="display: none;">
         FANCY BOX CONTENT GOES HERE
   </div>

    <script  type="text/javascript">
        $(document).ready(function () {
            $.fancybox({
                'href': '#divFancy'
            });
        });
    </script>

答案 4 :(得分:-1)

<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>