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

2 Answers 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.