为 onClick 事件的脚本添加额外的案例

Question

我有一个网站的弹出窗口，要求用户在尚未登录的情况下进行注册。我正在使用一个名为 "subscribe-better.js" (https://github.com/peachananr/subscribe-better) 的脚本，并且这非常适合在用户首次进入网站时加载弹出窗口。

但是，我希望在用户单击按钮时显示此弹出窗口。这是我的按钮：

 <div id="popClick" class="button btn">Sign Up to Proceed</div>

下面是我调用弹出窗口的方式：

<script> 
$(document).ready(function() {
    $(".subscribe-me2").subscribeBetter({
        trigger: "onclick", 
        animation: "fade",
        delay: 0,
        showOnce: true,
        autoClose: false,
        scrollableModal: false
    });
}); 
</script>

<div class="subscribe-me2">
     Sample Pop Up Content Here
</div>

以及使其弹出的代码。您会看到我已经为 onclick 添加了大小写，但是当我单击我的按钮时没有任何反应。我还尝试在 $('#popClick').click() 中调用弹出窗口而不是 document.ready()，但这也没有使弹出窗口出现。如何修复 switch 语句，使在单击 #popClick 按钮时出现弹出窗口？

!function($){

var defaults = {
trigger: "atendpage", // atendpage | onload | onidle
animation: "fade", // fade | flyInRight | flyInLeft | flyInUp | flyInDown
delay: 0,
showOnce: true,
autoClose: false,
scrollableModal: false
};

$.fn.subscribeBetter = function(options){
var settings = $.extend({}, defaults, options),
    el = $(this),
    shown = false,
    animating = false;

el.addClass("sb");

$.fn.openWindow = function() {
  var el = $(this);
  if(el.is(":hidden") && shown == false && animating == false) {
    animating = true;

    setTimeout(function() {
      if (settings.scrollableModal == true) {
        if($(".sb-overlay").length < 1) {
          $("body").append("<div class='sb-overlay'><div class='sb-close-backdrop'></div><div class='sb sb-withoverlay'>" + $(".sb").html() + "</div></div>");
          $(".sb-close-backdrop, .sb-close-btn").one("click", function() {
            $(".sb.sb-withoverlay").closeWindow();
            return false;
          });
          $(".sb.sb-withoverlay").removeClass("sb-animation-" + settings.animation.replace('In', 'Out')).addClass("sb-animation-" + settings.animation);
          setTimeout(function(){
            $(".sb.sb-withoverlay").show();
            $("body").addClass("sb-open sb-open-with-overlay");
          }, 300);
        }
      } else {
        if ($(".sb-overlay").length < 1) {
          $("body").append("<div class='sb-overlay'><div class='sb-close-backdrop'></div></div>");
          $(".sb").removeClass("sb-animation-" + settings.animation.replace('In', 'Out')).addClass("sb-animation-" + settings.animation);
          $(".sb-close-backdrop, .sb-close-btn").one("click", function() {
            $(".sb").closeWindow();
            return false;
          });
          setTimeout(function(){
            $(".sb").show();
            $("body").addClass("sb-open");
          }, 300);
        }

      }
      if (settings.showOnce == true) shown = true;
      animating = false;
    }, settings.delay);
  }
}

$.fn.closeWindow = function() {
  var el = $(this);
  if(el.is(":visible") && animating == false) {
    animating = true;
    if (settings.scrollableModal == true) {

      $(".sb.sb-withoverlay").removeClass("sb-animation-" + settings.animation).addClass("sb-animation-" + settings.animation.replace('In', 'Out'));

      setTimeout(function(){
        $(".sb.sb-withoverlay").hide();
        $("body").removeClass("sb-open sb-open-with-overlay");
        setTimeout(function() {
          $(".sb-overlay").remove();
        }, 300);
      }, 300);

    } else {

      $(".sb").removeClass("sb-animation-" + settings.animation).addClass("sb-animation-" + settings.animation.replace('In', 'Out'));
      setTimeout(function(){
        $(".sb").hide();
        $("body").removeClass("sb-open");
        setTimeout(function() {
          $(".sb-overlay").remove();
        }, 300);
      }, 300);
    }
    animating = false;
  }
}

$.fn.scrollDetection = function (trigger, onDone) {
  var t, l = (new Date()).getTime();

  $(window).scroll(function(){
      var now = (new Date()).getTime();
      if(now - l > 400){
          $(this).trigger('scrollStart');
          l = now;
      }

      clearTimeout(t);
      t = setTimeout(function(){
          $(window).trigger('scrollEnd');
      }, 300);
  });
  if (trigger == "scrollStart") {
    $(window).bind('scrollStart', function(){
      $(window).unbind('scrollEnd');
      onDone();
    });
  }

  if (trigger == "scrollEnd") {
    $(window).bind('scrollEnd', function(){
      $(window).unbind('scrollStart');
      onDone();
    });
  }
}

switch(settings.trigger) {
  case "atendpage":
    $(window).scroll(function(){
      var yPos = $(window).scrollTop();
      if (yPos >= ($(document).height() - $(window).height()) ) {
        el.openWindow();
      } else {
        if (yPos + 300 < ($(document).height() - $(window).height()) ) {
          if(settings.autoClose == true) {
            el.closeWindow();
          }
        }
      }

    });
    break;
  case "onload":

    $(window).load(function(){
      el.openWindow();
      if(settings.autoClose == true) {
        el.scrollDetection("scrollStart", function() {
          el.closeWindow();
        });

      }
    });

    break;
  case "onidle":

    $(window).load(function(){
      el.scrollDetection("scrollEnd", function() {
        el.openWindow();
      });

      if(settings.autoClose == true) {
          el.scrollDetection("scrollStart", function() {
            el.closeWindow();
          });
      }
    });

    break;
   case "onclick":
        $('#popClick').click(function(){
            el.openWindow();
        });
    break;
}


}

}(window.jQuery);

Answer 1

我认为问题在于您使用的 'showOnce' 全局限制弹出窗口显示不止一次。因此，您的 onclick 可能正在触发（我建议添加一个 console.log 以确保），但是 openWindow 函数中的 if(el.is(":hidden") && shown == false && animating == false) { 不再为真。

为 onClick 事件的脚本添加额外的案例

Adding additional case to script for onClick event

html

javascript

jquery

switch-statement