Afficher popup qu'une seule fois Jquery, PHP

Question

J'ai un popup qui s'ouvre sur un clic d'un bouton. Le bouton est présent dans toutes les pages.

La fenêtre contextuelle ne devrait apparaître qu'une seule fois. Lorsqu'un utilisateur ouvre une page et clique sur le bouton, le popup doit apparaître et s'il clique sur le même bouton, popup ne devrait pas venir, et à partir de cette page s'il redirige vers une autre page et clique sur le même bouton popup n'apparaît pas.

Si le navigateur est fermé et ouvert à nouveau, la fenêtre contextuelle doit apparaître et les mêmes conditions doivent s'appliquer à nouveau.

Ce sont les cas où une fenêtre contextuelle devrait apparaître et quand elle ne devrait pas apparaître.

Comment y parvenir avec jquery et PHP

Answer 1

vous pouvez créer spectacle pop-up qu'une seule fois sur clic en utilisant sessionStorage en échec jquery- travail exemple here

jsfiddle.net/ayatullahrahmani/p1p2zpx5/

ici est 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> 

Answer 2

sessionStorage est la meilleure option pour cela. car il stocke les données pour cette session seulement. Donc, vous pouvez stocker si la popup est opene ou pas. Il suffit de lier la fonction suivante en tant que gestionnaire au clic du bouton.

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. 
    } 
}