Last week I had a really interesting task, to display a popup window when the page is loaded. As the Fancybox jQuery plugin was already used in the project, I decided to use it for this task also. It was an adventure, as I’m not so familiar with the Fancybox, but here is the solution:

I created a hidden anchor in the html, something like:

<a href=”the_url_from_where_the_popup_window_is_loaded” title=”" onclick=”" id=”youtube_popin” style=”display:none;”></a>

In a javascript file which is previously declared, I added:

$(document).ready(function(){
var t=setTimeout(“show_youtube_popin()”,1000);
});

function show_youtube_popin(){

$(“#youtube_popin”).fancybox({

‘width’ : 760,

‘height’ : 330,

‘autoScale’ : false,

‘transitionIn’ : ‘none’,

‘transitionOut’ : ‘none’,

‘type’ : ‘iframe’,

‘hideOnContentClick’: true,

‘hideOnOverlayClick’: true

});

$(‘#youtube_popin’).trigger(‘click’);

}

Notice that the Fancybox is not called as the page is loaded, but after 1 second. If I did not use this timeout, I got a javascript error from the plugin (I think it wasn’t really loaded yet…)

After the Fancybox is applied to the hidden anchor element, i will trigger the click action on it with jQuery… And the popup window appears… SUCCESS!