CODEWITHSUNDEEP
jquerypopupfancybox
user1037444
user1037444

Reputation: 313

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.

Upvotes: 6

Views: 72832

Answers (7)

IRSHAD
IRSHAD

Reputation: 2933

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>

Upvotes: 0

Naveen Chandran
Naveen Chandran

Reputation: 31

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
});

Upvotes: 3

JFK
JFK

Reputation: 41143

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.

Upvotes: 19

Gerard
Gerard

Reputation: 4848

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.

Upvotes: 1

James Johnson
James Johnson

Reputation: 46047

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

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

Upvotes: 1

Yoram de Langen
Yoram de Langen

Reputation: 5499

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

Upvotes: 1

Tomalak
Tomalak

Reputation: 338208

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

Upvotes: 4

Related Questions