You can start the second Fancybox at any time, regardless of the fact that it is already open (and does not close it first). Just try launching the second Fancybox when the action is complete.
The second Fancybox window (once launched) will replace the first without an additional close command.
function openFancybox() { setTimeout( function() {$('#delayed').trigger('click'); },10000); } $(document).ready(function() { $('#pageLoad').fancybox({ helpers: {overlay:{opacity: 0.3}} }).click(); openFancybox(); $('#delayed').fancybox({ helpers: {overlay:{opacity: 0.3}} }); });
I installed here that launches Fancybox when the page loads, then it launches the second Fancybox after 10 seconds.
The first Fancybox automatically closes after the second launch.
UPDATE
Or maybe you prefer this version
function openFancybox() { setTimeout( function() {$('#delayed').trigger('click'); },10000); } $(document).ready(function() { $('#goProcess').click(function(){ $.fancybox({ href: '#wait', modal: true, helpers: {overlay:{opacity: 0.3}}, afterLoad: function() { openFancybox(); } });
Open fancybox by pressing a button, then launches a second fancybox after 10 seconds (or after the process completes in the background.)
source share