单击关闭后，不要弹出模式

Question

我有一个模态，每次页面加载时都会弹出弹出窗口，但是一旦用户单击“关闭”按钮，我该如何不再次显示？

提前致谢。

这是我的模态代码

<div class='modal' id='modal'>
      <div class='content'>
      <?php          
         //if (($now < $fromTime || $now >= $toTime) && ($now < $fromTime1 || $now >= $toTime1)){
          ?>          
          <span class="close" id='close'>&times;</span>
          <?php
          //}
      ?>
          <div>
          <a href="tel:<?php echo PHONE; ?>" onclick="return gtag_report_conversion('tel:<?php echo PHONE; ?>');" class="glow-on-hover">
            <img src="images/popup.jpg" class="modalimg" alt="banner"></img>
          </a>
          </div>
      </div>
  </div>

和我的jQuery

//弹出模式

$(document).ready(function (){
  $(".close").on("click", function (){
        $("#modal").css("display", "none")
    });
  
});
if(sessionStorage.getItem('#modal') !== 'true'){
    $('#modal').css('display','block');
    sessionStorage.setItem('#close','true');
}

Answer 1

在浏览器中执行的第一件事是HTML评估。由于您不希望您的模态在关闭后完全出现，因此请确保默认情况下它不会显示出来：

<div class='modal' id='modal' style="display: none;">
      <div class='content'>
      <?php          
         //if (($now < $fromTime || $now >= $toTime) && ($now < $fromTime1 || $now >= $toTime1)){
          ?>          
          <span class="close" id='close'>×</span>
          <?php
          //}
      ?>
          <div>
          <a href="tel:<?php echo PHONE; ?>" onclick="return gtag_report_conversion('tel:<?php echo PHONE; ?>');" class="glow-on-hover">
            <img src="images/popup.jpg" class="modalimg" alt="banner"></img>
          </a>
          </div>
      </div>
  </div>

现在，让我们看一下您的jQuery。您想确保：

• 如果它没有关闭，那么您确实显示了它，
• 如果它已关闭，则将其存储在关闭中

$(document).ready(function (){
  //if it's not closed, let's display it:
  if (sessionStorage.getItem('#close') !== 'true') {
      document.getElementById("modal").display = "block";
  }
  $(".close").on("click", function (){
        $("#modal").css("display", "none");
        //Storing it as closed for future loads
        sessionStorage.setItem('#close','true');
    });
  
});