向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以確保），但openWindow函數if(el.is(":hidden") && shown == false && animating == false) {不再是真實的。