Popup do not show after visitor come back to website

Question

I have created a very simple popup window. What I would like is when the visitor come to the website for the first time to show the popup and he will have to choose one of the two buttons in order to close the popup. Moreover, I would like to do not show the popup box when the user has visited the site before. I know that I can use localstorage for that but I do not know the technique. Please, I need someone to write me the localstorage code that I have to add in my code so that when someone visits the website for the first time to show the popup and choose one of the two buttons, and if he comes back again to do not show the popup using localstorage memory.

Thanks

HTML:

    <div id="popup">
       <div id="text">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque minus deleniti ex consequatur, rem, mollitia modi odit? Animi odit provident architecto omnis optio est, ut natus voluptatum, inventore deleniti laboriosam.
        </div>
        <div id="myButtons">
           <button id="button-left">Click Left</a>
           <button id="button-right">Click Right</a>
        </div>
   </div>

CSS:

 #popup {
            width: 30%;
            margin: 50px auto;
            padding: 50px;
            border: 10px solid #000;
        }

        #close-button {
            cursor: pointer;
        }

        #text {
            margin-top: 20px;
        }

        #button-left {
            display: inline-block;
            padding: 10px;
            background: #b4b0a9;
            float: left;
            margin-top: 10px;
        }

        #button-right {
            display: inline-block;
            padding: 10px;
            background: #b4b0a9;
            float: right;
            margin-top: 10px;
        }

JavaScript:

   var popup = document.getElementById("popup");
   var close_button = document.getElementById("close-button");
   var mainText  = document.getElementById("text");
   var button_left = document.getElementById("button-left");
   var button_right = document.getElementById("button-right");


    function closeBoxLeft() {
       popup.style.display = "none";
    }
    button_left.addEventListener("click", closeBoxLeft)

    function closeBoxRight() {
       popup.style.display = "none";
    }
    button_right.addEventListener("click", closeBoxRight)

Possible duplicate of [Storing Objects in HTML5 localStorage](http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage) — SouXin, Apr 27 '17 at 18:08
@SouXin well its not a duplicate, its rather to broad and without OPs effort... — Jonas Wilms, Apr 27 '17 at 18:11
You could try using the following technique. http://stackoverflow.com/questions/19707236/show-popup-after-page-load — krunal.cp, Apr 27 '17 at 18:12
you simply need to store two booleans in localStorage, then check on *window.onload* if theyre existing. Not tooo difficult — Jonas Wilms, Apr 27 '17 at 18:12
@Jonas "I know that I can use localstorage for that but I do not know the technique" ;) But You are right. Broad question is better — SouXin, Apr 27 '17 at 18:15
@pro78 NOPE http://google.it ! there are many good tutorials out there... no need to write it down again and again. Thats what copy &paste was made for... — Jonas Wilms, Apr 27 '17 at 18:21
Thank you all for your help. Michael Coker answer is what I wanted. — pro78, Apr 27 '17 at 18:28

score 1 · Accepted Answer · answered Apr 27 '17 at 18:19

1

This is the general idea. Read in the popup item via localStorage.getItem(), and if it doesn't exist, show the popup and set popup via localStorage.setItem()

var ls = localStorage.getItem('popup');
if (!ls) {
  document.getElementById('popup').classList.add('show');
  localStorage.setItem('popup',true);
}

.popup {
  display: none;
}
.show {
  display: block;
}

<div id="popup" class="popup">popup</div>

answered Apr 27 '17 at 18:19

Michael Coker

52,626
5
64
64

@pro78 no sweat :) – Michael Coker Apr 27 '17 at 18:28
thank you for your answer it works.However I would like furthermore help if you can help. If I want to do not show the popup to the user only if he clicks the left button, can you write me the code for that please? – pro78 Apr 29 '17 at 20:18
@pro78 first, please don't ask for additional solutions in the comments to one of your questions. Second, SO isn't a code writing service. If you want to pay me, sure. Otherwise, you need to take a stab at it and if you can't figure it out, make another post. – Michael Coker Apr 29 '17 at 20:39

Popup do not show after visitor come back to website

1 Answers1