i've searched through the forum yet i can't find the solution. i'm refering to this thread to do the auto close function: ... I did follow JFK's solution which works just right:

'onComplete': function() { 
   $("#fancybox-wrap, #fancybox-overlay").delay(3000).fadeOut(); 
   } 

if you don't want the user to close the box, then add modal=true

The scenario is I would like the user to have the option to close the modal when they click on the [close] button or click anywhere on the overlay. I'm using the latest version of FB and jQuery on Rails.

Here's my script:

<script type="text/javascript"> 
  jQuery(document).ready(function() { 
    jQuery("#link_post").fancybox({ 
      'autoDimensions':false, 
      'width':380, 
      'height':50, 
      'title':'This message box will automatically close in 10 
seconds.', 
      'titlePosition':'outside', 
      'onComplete': function() { 
        jQuery("#fancybox-wrap, #fancybox- 
overlay").delay(10000).fadeOut(); 
      } 
    }); 
  }); 
</script> 

However, when i clicked on the close button, the title and close button will fade away, but the FB's content and overlay are still there! it will only fade away after 10 seconds. So, my question is how to overwrite the 'onComplete' function if user clicks on the close button before it automatically closes?

i've searched through the forum yet i can't find the solution. i'm refering to this thread to do the auto close function: http://groups.google./group/fancybox/browse_thread/thread/d09438b7... I did follow JFK's solution which works just right:

'onComplete': function() { 
   $("#fancybox-wrap, #fancybox-overlay").delay(3000).fadeOut(); 
   } 

if you don't want the user to close the box, then add modal=true

The scenario is I would like the user to have the option to close the modal when they click on the [close] button or click anywhere on the overlay. I'm using the latest version of FB and jQuery on Rails.

Here's my script:

<script type="text/javascript"> 
  jQuery(document).ready(function() { 
    jQuery("#link_post").fancybox({ 
      'autoDimensions':false, 
      'width':380, 
      'height':50, 
      'title':'This message box will automatically close in 10 
seconds.', 
      'titlePosition':'outside', 
      'onComplete': function() { 
        jQuery("#fancybox-wrap, #fancybox- 
overlay").delay(10000).fadeOut(); 
      } 
    }); 
  }); 
</script> 

However, when i clicked on the close button, the title and close button will fade away, but the FB's content and overlay are still there! it will only fade away after 10 seconds. So, my question is how to overwrite the 'onComplete' function if user clicks on the close button before it automatically closes?

• javascript
• jquery
• fancybox

Share Improve this question Follow edited Feb 11, 2014 at 20:48 tshepang 12.5k2525 gold badges9898 silver badges139139 bronze badges asked Jun 16, 2010 at 13:38 justinwjustinw 71088 silver badges1111 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Alright, i've found the solution. FYI, i'm using fancybox v1.3.1 and jQuery v1.4.2

<script type="text/javascript"> 
  jQuery(document).ready(function() { 
    jQuery("#link_post").fancybox({ 
      'autoDimensions':false, 
      'width':380, 
      'height':50, 
      'title':'This message box will automatically close in 10 
seconds.', 
      'titlePosition':'outside', 
      'onComplete': function() { 
        jQuery("#fancybox-wrap, #fancybox- 
overlay").delay(10000).fadeOut(); 
      } 
    }); 

    jQuery("#fancybox-close").click(function() {
      jQuery('#fancybox-overlay').stop();
      jQuery('#fancybox-wrap').stop();
    });

  }); 
</script> 

    $(document).ready(function() {
    $('.fancybox').fancybox({
    'afterLoad': function() { 
       $(".fancybox-overlay").delay(3000).fadeOut(); 
    }
    });
});

It is work! for fancybox v2.x.