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

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

弹出窗口应该只出现一次

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

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

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

---

如何使用jquery和PHP实现这一点是最好的选择。因为它只存储该会话的数据。因此，您可以存储弹出窗口是否打开

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

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

---

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

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

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

使用jquery-check working中的会话存储，您只能在单击时创建一次弹出窗口显示 范例

这是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);
          });

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

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

css-

$(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);
          });

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

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

html-

$(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);
          });

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

<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-check working中的会话存储，您只能在单击时创建一次弹出窗口显示 范例

这是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);
          });

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

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

css-

$(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);
          });

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

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

html-

$(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);
          });

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

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

打开

查看cookies。您可以使用javascript会话存储来实现这一点。不需要使用PHP。使用会话存储可以实现这一点。@guradio我试图在单击按钮时创建一个会话，并根据会话变量显示弹出窗口，但在浏览器关闭时，会话未被清除，弹出窗口未被清除coming@spankajd你能举个例子看看饼干吗。您可以使用javascript会话存储来实现这一点。不需要使用PHP。使用会话存储可以实现这一点。@guradio我试图在单击按钮时创建一个会话，并根据会话变量显示弹出窗口，但在浏览器关闭时，会话未被清除，弹出窗口未被清除coming@spankajd你能举个例子吗