All geek questions in one place

Pop-up delay for 10 seconds, only once

Hi, I am using the fancybox built-in popup to notify you of promotion. The code I use for this:

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

How can I change this so that it automatically pops up, say, after 20 seconds? But once it was closed, it no longer appeared.

+4
source share
7 answers

In fact, none of the solutions published earlier work in real life, why? because the line:

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

doesn't start fancybox, it just binds fancybox to the # different1 selector, but it still needs a click to bring up the modal / lightbox (and not the popup). BTW, Gearóid's solution has syntax errors anyway. The only real value is that they suggest using a jQuery cookie (old site).

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

Steps for a working solution:

A) Download 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 somewhere in your html code (possibly hidden)

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

or for embedded content

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

In addition, if you use embedded content and fancybox v1.3.x, check for an existing error and a workaround here

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

+19
source 
 $(document).ready(function() { setTimeout(function () { $("#various1").fancybox(); }, 20000); });
+4
source 
 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 });
+2
source

You can use the delay function to do this:

 $("#various1").delay(20000).fancybox();
+1
source

You should use setTimeout to delay the popup like this:

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

Use the jQuery cookie library to set the cookie (name it something like "offer_closed") to true when the user clicks the close button. This means that a popup is already displayed.

PS. From a user interface point of view, you should avoid decisions using pop-ups. Users hate them. Try a more elegant solution like jGrowl.

+1
source

You can use 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);

Hope this is what you want? Your name and explanation are confusing

0
source

In the code example below, a pop-up window will open after 5 seconds when loading a page with the message "Welcome to the 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>
0
source

Source: https://habr.com/ru/post/1383450/

More articles:


All Articles