2

I have a modal that uses jQuery to popup on (document).ready.

$(document).ready(function() {
   $("#openModal").toggleClass("target");
});
$(window).one( "click", function() {
   $( "#openModal" ).toggleClass("target");
});

It works fine on desktop, but on iOS Safari it doesn't close on tap.

I read about the cursor:pointer fix, but it doesn't want to work in this scenario. I'm guessing this is because the event is binded to the window while the cursor is binded to the element.

And I obviously can't put body{cursor:pointer;}

What could this be caused by ?

Community
  • 1
  • 1
propster
  • 527
  • 1
  • 5
  • 14

2 Answers2

0

Using .one will only trigger this for the first click on the window, therefore if you tapped (clicked) on the window before the modal opens, the function will not run again. Try using this:

$(window).on( "click", function() {
    $( "#openModal" ).toggleClass("target");
});

Edit after your response:

I guess you want the modal to open only once on document ready, then do it like this, avoid using toggleClass and use this instead:

$(document).ready(function() {
$("#openModal").addClass("target");
});
$(window).click(function() {
$( "#openModal" ).removeClass("target");
});
Alin
  • 1,218
  • 5
  • 21
  • 47
  • if I use on, every time someone clicks, it will reopen the modal @Alin – propster Feb 20 '15 at 18:55
  • I guess you only want the modal to open only once when the document is loaded ? Then use addClass and removeClass instead of toggle...see my edit. – Alin Feb 20 '15 at 18:57
  • Then avoid using .on ('click'... and use .click(function directly, see the update – Alin Feb 20 '15 at 19:01
0
$(window).one('click touchstart', function () {
    $( "#openModal" ).toggleClass("target");
});
Ved
  • 2,701
  • 2
  • 22
  • 30