Making my javaScript popup to appear only once

Question

I am creating a JavaScript popup. The code is as below.

The HTML:

    <div id="ac-wrapper" style='display:none' onClick="hideNow(event)">
    <div id="popup">
        <center>
             <h2>Popup Content Here</h2> 
            <input type="submit" name="submit" value="Submit" onClick="PopUp('hide')" />
        </center>
    </div>
</div>

The CSS:

    #ac-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("images/pop-bg.png") repeat top left transparent;
    z-index: 1001;
}
#popup {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 18px;
    -moz-border-radius: 18px;
    -webkit-border-radius: 18px;
    height: 361px;
    margin: 5% auto;
    position: relative;
    width: 597px;
}

The Script:

function PopUp(hideOrshow) {
    if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none";
    else document.getElementById('ac-wrapper').removeAttribute('style');
}
window.onload = function () {
    setTimeout(function () {
        PopUp('show');
    }, 0);
}

function hideNow(e) {
    if (e.target.id == 'ac-wrapper') document.getElementById('ac-wrapper').style.display = 'none';
}

The jsFiddle Link:

http://jsfiddle.net/K9qL4/2/

The Issue:

The above script works fine, but I need to make the popUp to appear only once on my page. i.e, when the user closes the popup, it should not appear until the user restarts the browser or clears his cache/cookie.

I tried using the below cookie script, but it does not work for me.

<SCRIPT LANGUAGE="JavaScript">



<!-- Begin
var expDays = 1; // number of days the cookie should last

var page = "myPage.html";
var windowprops = "width=300,height=200,location=no,toolbar=no,menubar=no,scrollbars=no,resizable=yes";

function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function DeleteCookie (name) {
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
var exp = new Date();
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
function amt(){
var count = GetCookie('count')
if(count == null) {
SetCookie('count','1')
return 1
}
else {
var newcount = parseInt(count) + 1;
DeleteCookie('count')
SetCookie('count',newcount,exp)
return count
   }
}
function getCookieVal(offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}

function checkCount() {
var count = GetCookie('count');
if (count == null) {
count=1;
SetCookie('count', count, exp);

window.open(page, "", windowprops);

}
else {
count++;
SetCookie('count', count, exp);
   }
}
//  End -->
</script>

score 4 · Accepted Answer · answered May 21 '14 at 06:54

I thing in this case is better to use localStorage instead cookie. localStorage have a more intuitive interface and user cannot restrict this feature to be used. I have changed your code.

function PopUp(hideOrshow) {
    if (hideOrshow == 'hide') {
        document.getElementById('ac-wrapper').style.display = "none";
    }
    else  if(localStorage.getItem("popupWasShown") == null) {
        localStorage.setItem("popupWasShown",1);
        document.getElementById('ac-wrapper').removeAttribute('style');
    }
}
window.onload = function () {
    setTimeout(function () {
        PopUp('show');
    }, 0);
}


function hideNow(e) {
    if (e.target.id == 'ac-wrapper') document.getElementById('ac-wrapper').style.display = 'none';
}

Here is working jsFiddle. http://jsfiddle.net/zono/vHG7j/

Best regards.

Wow, this works perfectly fine .. Thanks a lot .. +1 and you being the first one to answer, I shall accept your answer :) — Nitesh, May 21 '14 at 07:17

score 2 · Answer 2 · answered May 21 '14 at 07:04

2

To not show this untill restart browser - use local storage

localStorage.setItem("setted",true);
localStorage.getItem("setted");

FIDDLE

To not show untill clear cache\cookie use cookies

document.cookie = "setted=true";
document.cookie.indexOf("setted=true")!=-1

FIDDLE

answered May 21 '14 at 07:04

deadulya

686
6
15

Works fine .. +1 .. Georgi Naumov answered first, so accepted his answer .. Thanks a lot for your time :) – Nitesh May 21 '14 at 07:18

score 2 · Answer 3 · answered May 21 '14 at 07:11

I've used local storage instead of cookie for the reason mentioned otherwise

however, I have added the comparison, and checked that you want to show it (also added a reset button for you to test easily)

fiddle is: http://jsfiddle.net/K9qL4/8/

    function PopUp(hideOrshow) {
        if (hideOrshow === 'hide') {
            document.getElementById('ac-wrapper').style.display = "none";
        }
        else if(localStorage.getItem("popupWasShown") !== "1" && hideOrshow === 'show') {
            document.getElementById('ac-wrapper').removeAttribute('style');
            localStorage.setItem("popupWasShown", "1");
        }
    }
    window.onload = function () {
        setTimeout(function () {
            PopUp('show');
        }, 1000);
    }


    function hideNow(e) {
        if (e.target.id == 'ac-wrapper') {
            document.getElementById('ac-wrapper').style.display = 'none';
            localStorage.setItem("popupWasShown", "1");
        }
    }

document.getElementById("reset").onclick = function() {
    localStorage.setItem("popupWasShown", "3");
}

Works fine .. +1 .. Georgi Naumov answered first, so accepted his answer .. Thanks a lot for your time :) — Nitesh, May 21 '14 at 07:19
This works great on a site that wasn't reading my stored cookie :) Thanks! — KVDD, Nov 01 '16 at 19:11

score 0 · Answer 4 · answered Mar 17 '20 at 10:51

We have slightly modified the code with session storage in order to load the popup whenever the page is loaded (several times per day or in a new window/tab):

    else  if(sessionStorage.getItem("popupWasShown") == null) {
        sessionStorage.setItem("popupWasShown",1);
        document.getElementById('ac-wrapper').removeAttribute('style');
    }

Full code:

function PopUp(hideOrshow) {
    if (hideOrshow == 'hide') {
        document.getElementById('ac-wrapper').style.display = "none";
    }
else  if(sessionStorage.getItem("popupWasShown") == null) {
        sessionStorage.setItem("popupWasShown",1);
        document.getElementById('ac-wrapper').removeAttribute('style');
    }
}
window.onload = function () {
    setTimeout(function () {
        PopUp('show');
    }, 0);
}


function hideNow(e) {
    if (e.target.id == 'ac-wrapper') document.getElementById('ac-wrapper').style.display = 'none';
}

score 0 · Answer 5 · answered Apr 01 '22 at 04:32

**CSS:**
<style>
    #popup{
        display:none;
    }
</style>
    
    **HTML:**
    <div id="popup">
        <center>
            <h2>Popup Content Here</h2> 
            <input type="button" name="submit" value="Submit"/>
        </center>
    </div>
    
    **JS:**
    <script>
    getCookie = function(data){
        var dset = data + "=";
        var c = document.cookie.split(';');
        for(var i=0; i<c.length; i++){
            var val = c[i];
            while (val.charAt(0)==' ') val = val.substring(1, val.length);
            if(val.indexOf(dset) == 0) return val.substring(dset.length, val.length)
        }
    
        return "";
    }
    
    
    if(getCookie("popupShow") != "yes"){
        document.getElementById('popup').style.display = "block";
        //set cookie
        document.cookie = 'popupShow=yes; expires=Sun, 1 Jan 2023 00:00:00 UTC; path=/'
    }
    
      </script>

Try this one it works on my end;

Welcome to SO! Please explain your answer a little in textual form: How and why does it work? What makes it differ from the other answers? — ahuemmer, Apr 02 '22 at 07:05

Making my javaScript popup to appear only once

5 Answers5

Linked