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

你可以在点击时使用 sessionStorage 在jquery- check working中创建一次弹出式节目例如here

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>

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

2 个答案: