Show popup only once Jquery, PHP

Question

I have a popup which opens on click of a button. The button is present in all the pages.

The popup should appear only once.

When a user opens a page and click on button the popup must appear and if he clicks on the same button again popup should not come, and from that page if he redirects to another page and clicks on the same button popup should not appear.

If the browser is closed and opened again the popup must appear and the same conditions must apply again.

These are the cases when a popup should appear and when it should not.

How to achieve this with jquery and PHP

Answer 1

sessionStorage is the best option for this. as it stores data for that session only. So you can store whether the popup is opene or not.

Just bind the following function as handler function on button click.

function onButtonClick(e)
{
    if (sessionStorage.isButtonClicked == undefined) {

         sessionStorage.isButtonClicked = true;

         // You can do require functionality here e.g. open the popup. 

    } else {

         // do nothing as popup is already opened.
    }
}

Answer 2

you can create popup show only once on click using sessionStorage in jquery- check working example here

jsfiddle.net/ayatullahrahmani/p1p2zpx5/

here is jquery Code-

$(document).ready(function () {
               $(".open").click(function () {
                    $(".animateDivWrap").addClass("activePopup");
               });

              $(".close").click(function () {
                  $(".animateDivWrap").removeClass("activePopup");

                  sessionStorage.setItem("myClass", "firstGone");
                    $(".animateDivWrap").addClass(sessionStorage.myClass);
              });

              // after first load this class would be added
              $(".animateDivWrap").addClass(sessionStorage.myClass);
          });

css-

 body {
         overflow:hidden;
         }
         .animateDivWrap {
         position: absolute;
         top: 70px;
         right: 0px;
         left:0px;
         width: 300px;
         height: 199px;
         background: #f6f6f6;
         z-index: 9;
         display: none; 
         /*opacity: 0;*/
         border: solid 1px #ddd;
         border-radius: 5px;
             margin:auto;
         }
         .animateDivContent {
         position:relative;
             padding: 10px;
         }
         .animateDivContent .close {
         position: absolute;
         right: 5px;
         top: 3px;
         font-size: 12px;
         color: #373434;
         opacity: 1;
         }
         @-webkit-keyframes fadeInUp { 
         0% { 
         opacity: 0; 
         -webkit-transform: translateY(400px); 
         } 
         50%{
         opacity: 0.3; 
         }
         100% { 
         opacity: 1; 
         -webkit-transform: translateY(0); 
         } 
         } 
         @keyframes fadeInUp { 
         0% { 
         opacity: 0; 
         transform: translateY(400px); 
         } 
         50%{
         opacity: 0.3; 
         }
         100% { 
         opacity: 1; 
         transform: translateY(0); 
         } 
         } 
         .fadeInUp{ 
         opacity: 0; 
         -webkit-transform: translateY(400px); 
         transform: translateY(400px);
         }
         .activePopup {
         display: block;
         /*opacity:1;*/
         /*-webkit-animation:bounce 1s infinite;*/
         -webkit-animation-name: fadeInUp; 
         animation-name: fadeInUp; 
         -webkit-animation-name: fadeInUp; /* Safari 4.0 - 8.0 */
         -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
         animation-name: fadeInUp;
         animation-duration: 1s;
         }
         .close {
         cursor: pointer;
         }
         .firstGone  {
         display:none;
         }

html-

<button type="button" class="open">open</button>

      <div class="animateDivWrap">
         <div class="animateDivContent">
            <a class="close" href="javascript:void(0)" title="close"><i class="fa fa-times" aria-hidden="true"></i></a>
         </div>
      </div>