0

希望有人可以帮助我解决这个问题。我创建了一个fancybox包含两个链接的弹出窗口，一个将用户带到调查页面，另一个取消并关闭弹出窗口。

它在桌面上按预期工作，但现在需要在移动设备上工作。所以我创建了一个变量来处理触摸事件并更新了 on 事件处理程序。

它在桌面上仍然可以正常工作，但是当我在手机上测试时，选择链接什么也没做。有人遇到类似的问题吗？知道我该如何解决这个问题吗？非常感谢您的建议/建议。

$.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();

    });
  }
});
4

1 回答 1

0

他们应该，但是我会对您的代码进行一些调整：

  • 将事件绑定到document 对象而不是花式框的叠加层
  • 改用afterShow 回调_afterLoad

这里的代码：

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()
        });
    }
});

在这里查看DEMO，并检查“活动日志”（您可以在桌面和手机上测试它）

注意：我听说touchstart 事件绑定的元素可能由于z-index问题而无法工作。您可能想要增加上面z-index的#takeSurveyand#cancelSurvey选择器9000（fancybox is 8020）

于 2015-03-24T03:18:38.773 回答