仅显示一次弹出窗口 Jquery, PHP答案

【问题标题】：Show popup only once Jquery, PHP仅显示一次弹出窗口 Jquery, PHP
【发布时间】：2017-10-15 02:00:24
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

查看 cookie。 plugins.jquery.com/cookie
您可以使用 javascript 会话存储来实现这一点。无需使用 PHP。
使用会话存储可以实现这一点。
@guradio 我正在尝试在单击按钮时创建一个会话，并根据会话变量显示弹出窗口，但在浏览器关闭时会话没有被清除并且弹出窗口不会出现
@spankajd 你能举个例子吗

标签： javascript php jquery session session-cookies

【解决方案1】：

您可以在 jquery 中使用 sessionStorage 在点击时创建一次弹出显示 - 检查工作例如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>

【讨论】：

【解决方案2】：

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

【讨论】：