javascript - 仅显示一次弹出窗口 Jquery、PHP

Question

我有一个弹出窗口，单击按钮即可打开。该按钮出现在所有页面中。

弹出窗口应该只出现一次。

当用户打开页面并单击按钮时，必须出现弹出窗口，如果他再次单击同一按钮，则不应出现弹出窗口，并且如果他从该页面重定向到另一个页面并单击同一按钮，则不应出现弹出窗口出现。

如果浏览器关闭并再次打开，则必须出现弹出窗口，并且必须再次应用相同的条件。

在这些情况下，应该出现弹出窗口，而不应出现弹出窗口。

如何使用 jquery 和 PHP 实现此目的

Answer 1

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

jsfiddle.net/ayatullahrahmani/p1p2zpx5/

这是 jquery 代码-

$(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>