Don't popup modal once click close

user_18710947 0
Viewed 57

I have a modal which popups every time the page loads but how can I make it to not show again once user clicks on the close button?

Thanks in advance.

here is my modal code

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

and my jQuery

//Popup Modal

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

The first thing that is executed in your browser is the HTML evaluation. Since you do not want your modal to appear at all once it was closed, let's make sure that it's not being displayed by default:

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

Now, let's take a look at your jQuery. You want to make sure that:

  • if it was not closed, then you do display it
  • if it is being closed, then you store it as being closed
$(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');
    });
  
});
user_4365600
Related