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

Question

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 · Accepted Answer · 2012-03-26T07:59:09.823

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.

THANKS JFK !! only problem the jquery cookie plugin link you provided is dead do you know where i could find the information on that ? again thanks for al the help — user1037444, Dec 08 '11 at 17:20
I know I'm way late, just wanted to say this answer is perfect! — Adam Fratino, May 07 '14 at 16:36

score 4 · Answer 2 · answered Nov 28 '11 at 16:25

4

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

answered Nov 28 '11 at 16:25

Tomalak

332,285
67
532
628

score 3 · Answer 3 · answered May 30 '16 at 09:13

3

Use Timeout function. The solution for your query is below
$(document).ready(function () {
setTimeout(function() {
$('your modal id').modal('show')  }, 10000); //displays modal after 10 seconds
});

answered May 30 '16 at 09:13

Naveen Chandran

31
1

score 1 · Answer 4 · answered Nov 28 '11 at 16:25

You can use the setTimeout function in javascript:

setTimeout(function() {
    // first wait 20 seconds before this popups
    $("#various1").fancybox();

    setTimeout(function() {
        //.. what to do after 10 seconds
    }, 10000);

}, 20000);

I hope this is what you want? Your title and explanation is confusing

score 1 · Answer 5 · answered Nov 28 '11 at 16:26

1

You should be able to use the delay function for this:

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

answered Nov 28 '11 at 16:26

James Johnson

45,496
8
73
110

Gerard · Answer 6 · 2011-11-28T16:27:53.610

1

You should use setTimeout to delay the popup like so:

setTimeout("showPopup()",20000);

function showPopup() {
    if (null != $.cookie("offer_closed"))
         $("#various1").fancybox();});
}

The use the jQuery cookie library to set a cookie (call it something like "offer_closed") to true when the user clicks close. This then signals that the popup was already displayed.

PS. From a UI point of view, you should try to avoid solutions using popups. Users hate them. Try a more elegant solution like jGrowl.

edited Nov 28 '11 at 16:27

answered Nov 28 '11 at 16:26

Gerard

4,818
5
51
80

you can set it to true after displaying the box. example here: http://radarvicieux.com/ after 15s or so – unloco Nov 28 '11 at 16:30
You never feed a string to `setTimeout`. Just pass the function name (or the function itself). – Tomalak Nov 28 '11 at 17:06
@Tomalak Actually you *have* to feed a string to it. Passing the function name causes a timeout but the function won't be invoked. – Gerard Nov 28 '11 at 20:14
this is because you must define the function before you use it. Try placing the `setTimeout()` call below the function definition. – Tomalak Nov 28 '11 at 20:15
@Tomalak, this is an interesting one. If you wish to specify the function with parentheses then you need to pass it as a string. If you call it as a function with parentheses (as you would normal js functions) then the function gets invoked immediately thus rendering the timeout useless. Tested on FF 8.0.1 – Gerard Nov 29 '11 at 12:14
@Gearóid I did never say that you should *call* the function. I said you should *pass* it: `setTimeout(showPopup, 20000);`. – Tomalak Nov 29 '11 at 13:09

IRSHAD · Answer 7 · 2016-12-02T19:02:49.317

See the below code example, popup will open after 5 seconds on page load with a message "Welcome to site name" -

<head>
<script type="text/javascript">
    $(document).ready(function(){

        openFancybox();
        $('#various1').fancybox();
    });
    function openFancybox() {
        setTimeout( function() {$('#various1').trigger('click'); },5000);
    }
</script>
</head>

<body>
<a id="various1" href="#target"></a>
<div style="display: none;">
 <div id="target">welcome to shoesdekho.com</div>
</div>
</body>

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

7 Answers7

Linked

Related