CODEWITHSUNDEEP
jquerymobilefancyboxtouchstart
Dianna Cheng
Dianna Cheng

Reputation: 1

Touchevent inside fancybox popup not working on mobile devices

Hoping someone can help me out with this. I've created a popup using fancybox that contains two links, one taking the user to a survey page, the other cancelling and closing the popup.

It worked as expected on desktop, however it now needs to work on mobile devices. So I've created a variable to handle the touch event and updated the on event handler.

It still works fine on desktop but when I test on my phone, selecting the links does nothing. Anyone run into a similar issue? Know how I might fix this issue? Suggestions/advice is greatly appreciated.

$.fancybox({
  modal: true,
  content: "<div id=\"surveyDialog\"><img src=\"SurveyThumb.jpg\"><h3>" + title + "</h3><p>" + msg + "</p><div><div class=\"generic-forward-button boxed\"><a href=\"\" id=\"takeSurvey\">Yes <span></span></a></div><a href=\"\" id=\"cancelSurvey\">No, thanks</a></div></div>",
  afterLoad: function () {
    var clickEvent=((document.ontouchstart!==null)?'click':'touchstart');

    $('.fancybox-overlay').on(clickEvent, '#takeSurvey', function(e) {
      e.stopPropagation();
      e.preventDefault();
      var survey = window.open('http://someurl.com/feedback', '_blank');
      survey.focus();
      $.cookie(cookiename, 'take-survey', { expires: 365 });//set cookie if user selects survey
      $.fancybox.close();

    });

    $('.fancybox-overlay').on(clickEvent, '#cancelSurvey', function(e) {
      e.stopPropagation();
      e.preventDefault();
      $.cookie(cookiename, 'refuse-survey');//set session cookie
      $.fancybox.close();

    });
  }
});

Upvotes: 0

Views: 2136

Answers (2)

Андрей Рабой
Андрей Рабой

Reputation: 59

Use

$.fancybox({
    modal: true,
});

Upvotes: -1

JFK
JFK

Reputation: 41143

They should, however I would make some tweaks to your code :

  • bind the event to the document object instead the fancybox's overlay
  • use the afterShow callback instead afterLoad

Here the code :

var clickEvent = document.ontouchstart !== null ? 'click' : 'touchstart';
$.fancybox({
    modal: true,
    content: "<div id=\"surveyDialog\"><img src=\"http://placehold.it/100/&text=image.jpg\"><h3>" + title + "</h3><p>" + msg + "</p><div><div class=\"generic-forward-button boxed\"><a href=\"\" id=\"takeSurvey\">Yes <span></span></a></div><a href=\"\" id=\"cancelSurvey\">No, thanks</a></div></div>",
    afterShow: function () {
        $(document).on(clickEvent, '#takeSurvey', function (e) {
            // redirect to survey, focus, etc.
            // cookie settings, etc.
            $.fancybox.close();
            return false; // does both stopPropagation() and preventDefault()
        });
        $(document).on(clickEvent, '#cancelSurvey', function (e) {
            // cookie settings, etc.
            $.fancybox.close();
            return false; // does both stopPropagation() and preventDefault()
        });
    }
});

See DEMO here, and check the "Activity Log" (you can test it in desktop and phone)

NOTE : I have heard elements where touchstart events are bound may not work due to z-index issues. You may want to increase the z-index of the #takeSurvey and #cancelSurvey selectors above 9000 (fancybox is 8020)

Upvotes: 0

Related Questions