Show popup and reset timer on refresh

Question

I am showing a popup for users that are not logged in. I do this using javascript and PHP.

<?php

if ( ( is_single() || is_front_page() || is_page() ) 
       && !is_page('login') && !is_page('register') && !is_user_logged_in()){

    echo'<div class="overlay-bg">
</div>
<div class="overlay-content popup3">
    <h1>You must login or Register to view this site. do_shortcode("[sp_login_shortcode]");</h1>
</div>';
} 

?>

Javascript code as below

$(document).ready(function(){

    // function to show our popups
    function showPopup(whichpopup){
        var docHeight = $(document).height(); //grab the height of the page
        var scrollTop = $(window).scrollTop(); //grab the px value from the top of the page to where you're scrolling
        $('.overlay-bg').show().css({'height' : docHeight}); //display your popup background and set height to the page height
        $('.popup'+whichpopup).show().css({'top': scrollTop+20+'px'}); //show the appropriate popup and set the content 20px from the window top
    }

    // function to close our popups
    function closePopup(){
        $('.overlay-bg, .overlay-content').hide(); //hide the overlay
    }

    // timer if we want to show a popup after a few seconds.
    //get rid of this if you don't want a popup to show up automatically
    setTimeout(function() {
        // Show popup3 after 2 seconds
        showPopup(3);
    }, 4000);


});

I want to show the popup after 5 minutes for the first time for a visitor when he visits the site. But when the same visitor refresh the page or come again in future I want to show the popup instantly rather after 5 minutes.

How can I achieve that in the above code please. Please help.

Thanks

Answer 1

I got the answer from my self with the help of my friend .The cookie should set like below

<?php
setcookie("visited",true);

if(!empty($_COOKIE['visited']) && $_COOKIE['visited'] == true)
 $popup_time = 0;
 else
 $popup_time = 60000; 
?>

Here $popup_time variable is set to the function javascript code like below

setTimeout(function() {
        // Show popup3 after 2 seconds
        showPopup(3);
    }, <?php echo $popup_time?>);

And that's it :) . I am frustrated that no one given me a right way here.

Anyway thanks

Answer 2

Here the idea on how can you achieve this.

1. user open the page

2. check if a cookie is_first_time is set

   2a. if not set show the popup after 5 minutes and set the is_first_time cookie
   2b. if already set show the popup instantly