为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添加了案例，但是当我点击我的按钮时什么也没发生。我也试过而不是document.ready()来调用$('#popClick').click()内的弹出窗口，但这也没有弹出窗口。如何修复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以确保）但if(el.is(":hidden") && shown == false && animating == false) {函数中的openWindow不再是真的。