Close lightbox on clicking outside not working in iPhone/iPad

Question

Below is the code I am using. Clicking outside closes the lightbox in Windows and Android, but not in iPhone and iPad.

JS:

$(document).on('click', function(event) {
  if ($(event.target).has('.pop-up').length) {
    $('.pop-up-overlay').hide();
  }
});

HTML:

<div class="pop-up-overlay">
  <div class="pop-up">
    <p>Popup contents goes here.</p>
  </div>
</div>

Answer 1

Maybe try this for ios:

    $(document).on("click touchstart", function(event) {
      if ($(event.target).has('.pop-up').length) {
        $('.pop-up-overlay').hide();
      }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pop-up-overlay">
  <div class="pop-up">
    <p>Popup contents goes here.</p>
  </div>
</div>

Similar question was asked in this link