每个用户仅显示一次弹出窗口

Display a popout only once per user

本文关键字：一次 窗口 用户 显示      更新时间：2023-09-26
这个问题

已经有了答案，但我仍然不确定它是如何工作的。

这是我的代码：

这是我的JavaScript：

   <!--PopupScript-->
    <script>
      // you can use just jquery for this
      $(document).ready(function(){
         $('#overlay-back').fadeIn(500,function(){
            $('#popup').show();
         });
         $(".close-image").on('click', function() {
            $('#popup').hide();
            $('#overlay-back').fadeOut(500);
         });
      });
   </script>

这是 HTML：

     <!--Popup Content-->
    <div class="container-fluid">
    <div id="overlay-back"></div>
    <div id="popup">
    <img src="Assets/images/Deep_Close.png" class="close-image" />
    <form name="Mail_list" action="save.php" method="post">
    <h4>Subscription</h4>
    <br/>
        <div class="form-group">
          <label for="first_name">First Name: </label>
          <input type="text" name="first_name" id="first_name" size="25" placeholder="First Name" autofocus required />
        </div>
        <div class="form-group">
          <label for="last_name">Last Name: </label>
          <input type="text" name="last_name" id="last_name" size="25" placeholder="Last Name"  required />
        </div>
         <div class="form-group">
          <label for="email">User Email: </label>
          <input type="text" name="email" id="email" size="25" placeholder="Email"  required />
        </div>
        <br/><br/>
        <input type="submit" value="Submit Form">
        <input type="reset" value="Reset Form">         
      </form>
</div>
</div>

此解决方案非常适合我需要它。问题是我不希望每次有人导航到主页时都显示弹出窗口，我希望弹出窗口在每个用户或会话中仅显示一次。我知道这可以通过使用"cookie"来实现，但我不知道如何将其合并到上面的JavaScript中。

任何帮助将不胜感激。谢谢。

您可以使用 localStorage。

例：

    $('#overlay-back').fadeIn(500,function(){
        if (localStorage.popupShown !== "true") {
          $('#popup').show();
          localStorage.popupShown = "true";
        }
     });

你可以试试 

$(document).ready(function(){
         if (sessionStorage.count==0) {
         $('#overlay-back').fadeIn(500,function(){
            $('#popup').show();
            sessionStorage.count = 1;
         });
         }
         $(".close-image").on('click', function() {
            $('#popup').hide();
            $('#overlay-back').fadeOut(500);
         });
      });
相关文章：