只显示一次Jquery，PHP弹出窗口

Question

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

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

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

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

这些是出现弹出窗口时应该出现的情况。

如何使用jquery和PHP实现这一点

Answer 1

sessionStorage是最好的选择。 因为它只存储该会话的数据。 因此，您可以存储弹出窗口是否打开。

只需在按钮单击时将以下函数绑定为处理函数。

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

您可以在jquery-检查工作示例使用的sessionStorage上单击创建弹出只显示一次在这里

jsfiddle.net/ayatullahrahmani/p1p2zpx5/

这里是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>