0

誰かがこれで私を助けてくれることを願っています。fancybox2 つのリンクを含むポップアップを作成しました。1 つはユーザーを調査ページに移動し、もう 1 つはポップアップをキャンセルして閉じます。

デスクトップでは期待どおりに動作しましたが、モバイル デバイスでも動作する必要があります。そこで、タッチ イベントを処理する変数を作成し、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()
        });
    }
});

ここでデモを参照し、「アクティビティ ログ」を確認してください (デスクトップと電話でテストできます)。

注:touchstart イベントがバインドされている要素が問題により機能しない可能性があると聞いていz-indexます。z-index上記の#takeSurveyおよび#cancelSurveyセレクターを増やしたい場合があります9000(fancybox は8020)

于 2015-03-24T03:18:38.773 に答える