how to just open a fancybox window (not onclick)

问题

I am triggering the fancybox to open onclick like this:

$('.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?

回答1:

Instead of calling .fancybox on an element, call it like this:

$.fancybox.open(...)

Note this is fancybox 2 syntax, although it might work with v1

If you want to have it open on both onclick and when prompted in your code, just call click on the element you've attached it to.

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

回答2:

you can just call yourControl.click() to simulate a click event.

That way you can call it whenever you want it :)

回答3:

According to Fancybox's blog, you can try something like this:

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

回答4:

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>

回答5:

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

来源：https://stackoverflow.com/questions/8589881/how-to-just-open-a-fancybox-window-not-onclick

标签

javascript

jquery

fancybox