user1037444 user1037444 - 6 months ago 69
Javascript Question

Delay pop-up for 10 seconds, only pop up once

Hi I'm using the fancybox inline pop-up to to alert a view to a promotion. The code I'm using for this is:

$(document).ready(function() {
$("#various1").fancybox();
});


How would I modify this so it automaticly popped up after, say, 20 seconds? But once it's been closed it schouldn't pop up again.

JFK JFK
Answer

Actually, none of the solutions posted previously work in real life, why? because the line:

$("#various1").fancybox();

doesn't trigger fancybox, it just binds fancybox to the selector #various1, but it still needs a click to trigger the modal/lightbox (not a popup). BTW, GearĂ³id's solution has syntax errors anyway. The only real value is that they suggest the use of the jQuery cookie plugin (old site).

EDIT: (March 07, 2012) The jQuery cookie plugin home page moved here.

Steps for a working solution:

A) Load the jQuery cookie plugin (as suggested) after jQuery and fancybox js files

B) Then use this script:

<script type="text/javascript">
function openFancybox() {
    setTimeout( function() {$('#various1').trigger('click'); },20000);
}
$(document).ready(function() {
    var visited = $.cookie('visited');
    if (visited == 'yes') {
        return false;
    } else {
        openFancybox();
    }
    $.cookie('visited', 'yes', { expires: 7 });
    $('#various1').fancybox();
});
</script>

C) you still need to have somewhere in your html code (maybe hidden)

<a id="various1" href="path/target"></a>

or for inline content

<a id="various1" href="#target"></a>
<div style="display: none;">
 <div id="target">message to display in fancybox</div>
</div>

Also, if you use inline content and fancybox v1.3.x, check for an existing bug and workaround here

PS. fancybox is not a popup but a modal/lightbox jQuery plugin, which is a non-intrusive solution like jGrowl from a UI point of view.

Comments