Wednesday, January 06, 2016

Display a popup on loading first time only in the browser


Is to set a cookie which is basically a file that sits in your browser and contains some kind of data. On the first page load you would create a cookie. Then every page after that you check if your cookie is set. If it is set do not display the pop up. However if its not set set the cookie and display the pop-up.

Try HTML localStorage.

Methods :
  • localStorage.getItem('key');
  • localStorage.setItem('key','value');

<div id="popup">
    <div>
        <div id="popup-close">X</div>
            <h2>Content Goes Here</h2>
    </div>
</div>

$(document).ready(function() {
 
    if(localStorage.getItem('popState') != 'shown'){
        $("#popup").delay(2000).fadeIn();
        localStorage.setItem('popState','shown')
    }

    $('#popup-close').click(function(e) // You are clicking the close button
    {
        $('#popup').fadeOut(); // Now the pop up is hiden.
    });

    $('#popup').click(function(e) 
    {
        $('#popup').fadeOut(); 
    });
});
 

Working Demo

 Cheers :)

No comments:

Post a Comment