Show jQuery popup only at first visit of a page

Question

I am new to jQuery, and I have some needs on my website. I want to show the jQuery div popup at the first time only when the user comes. No need to show again and again.

Still I am using this, but I don't know how to hide at the second time:

var isshow=0;
$(document).ready(function() {
   if (isshow == 0) {
     $('#jPopup').show();
   }
   isshow = 1;
});

But the ishow variable initializes every time.

You can use cookie or local storage for this. – Umesh Sehta Aug 22 '15 at 10:34 — Umesh Sehta, Aug 22 '15 at 10:34

Umesh Sehta · Accepted Answer · 2016-10-25T05:29:49.863

27

You can use localstorage. It is easy to understand and use.

$(document).ready(function() {
    var isshow = localStorage.getItem('isshow');
    if (isshow== null) {
        localStorage.setItem('isshow', 1);

        // Show popup here
        $('#jPopup').show();
    }
});

It will show you the popup at first visit of your site.

edited Oct 25 '16 at 05:29

answered Aug 22 '15 at 10:42

Umesh Sehta

10,555
5
39
68

1

Thanks @umesh , its working fine for me. Thanks a lot. – rudrainnovative Aug 22 '15 at 10:50
Shouldn't the variable name of `getItem` and `setItem` be the same? – Bijan Oct 25 '16 at 01:47
@Bijan, It should be the same. – Umesh Sehta Oct 25 '16 at 05:29
@UmeshSehta not necessarily. `isshow` will always be null because you are setting the value of a different variable name. – Bijan Oct 25 '16 at 08:25

sap · Answer 2 · 2021-02-11T11:32:13.973

You may use SessionStorage or LocalStorage for this as per your need.

If you need to do only for that session, use SessionStorage. If it should be stored permanently in the user's browser, use LocalStorage.

    $(document).ready(function(){
        if(sessionStorage && !sessionStorage.getItem('isshow')){
            $('#jPopup').show();
            sessionStorage.setItem('isshow', true);
        }
    });

Pawan · Answer 3 · 2015-08-22T11:06:20.877

4

You can use localStorage for this purpose as below:

$(document).ready(function(){
   var shown= localStorage.getItem('isshow');
    if(shown !="t"){
        $('#jPopup').show();
        localStorage.setItem('isshow', "t");
    }
});

edited Aug 22 '15 at 11:06

answered Aug 22 '15 at 10:43

Pawan

1,704
1
16
37

score 4 · Answer 4 · edited Aug 22 '15 at 19:24

You can set a cookie to store a value and check if it is not set then show popup:

$(document).ready(function() {
    var isshow = $.cookie("isshow");
    if (isshow == null) {
        $.cookie("isshow", 1); // Store

        // Show popup here
        $('#jPopup').show();
    }
});

Or you can set localStorage. Here is a working example. jsFiddle

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

Tal · Answer 5 · 2017-06-17T08:28:38.023

2

You need to hide it on load or do it in css (recommended)and then check localstorage to see if it is the first visit.

$(document).ready(function() {
        $('#jPopup').hide(); //hide on load or in css, later check if its the first visit
        var isshow= localStorage.getItem('status');
        //check if it is the first visit
        if (isshow == null || isshow == '') {
            //set variable to 1
            localStorage.setItem('isshow', 1);
            $('#jPopup').show();
        }
        });

edited Jun 17 '17 at 08:28

answered Aug 22 '15 at 10:47

Tal

1,091
12
25

1

@Tal Do you have any style guide links which would advise that? Personally I find it at least mildly annoying to see a big popup appear for a split second as the DOM loads before the script gets executed. – Sebi Aug 22 '15 at 16:43

Show jQuery popup only at first visit of a page

5 Answers5

Linked