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

我有一个网站弹出窗口，要求用户在尚未登录时注册。我正在使用一个名为“subscribe better.js”（subscribe better.js）的脚本，当用户第一次进入站点时，这个脚本非常适合加载弹出窗口

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

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

---

我认为问题在于您使用的是“showOnce”，这在全局范围内限制了弹出窗口的显示次数。因此，您的onclick可能正在启动（我建议添加一个console.log以确保），但是如果（el.is（“：hidden”）&&show==false&&animating==false，则

{

在

openWindow

函数中不再是真的。

我认为问题在于您使用的是'showOnce'，它全局限制弹出窗口显示不止一次。因此，您的onclick可能正在启动（我建议添加一个console.log来确保），但是

如果（el.is（“：hidden”）&&show==false&&animating==false）{

在

openWindow

函数中不再有效。

我认为问题在于您使用的是'showOnce'，它全局限制弹出窗口显示多次。因此，您的点击可能会触发（我建议添加一个

console.log

以确保），但如果（el.is（“：hidden”）则

&&show==false&&animating==false）{

在openWindow函数中不再为true。此插件没有“onclick”选项。@makshh我知道，它不是内置的，但我在底部添加了“onclick”的案例。嗯，它对我来说很好（单击时）使用您的代码，我只将showOnce设置为false@ArrayKnight啊，谢谢你，好先生！作为答案发布，我会接受。我相信问题在于你使用的是“showOnce”，它在全局范围内限制弹出窗口显示多次。因此，你的点击可能会触发（我建议添加一个

控制台。确保登录
），但如果（el.is（“：hidden”）&&show==false&&animating==false）{
在openWindow函数中不再是真的。这个插件没有“onclick”选项。@makshh我知道，它不是内置的，但我在底部添加了一个“onclick”的案例。嗯，它对我来说很好（点击时）使用您的代码，我只将showOnce设置为false@ArrayKnight啊，谢谢你，好先生！作为回答，我会接受的
<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>

!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);