Question

我有一个带有3个滑块和一个弹出框的网页。
对于使用jQuery.noConflict()的滑块，这样工作正常。
但是如果我正在使用弹出框的话jQuery.noConflict()它不起作用。
如果我没有使用jQuery.noConflict()，那么我的滑块就无法工作。

弹出式HTML

<div id="popupContact">
  <a id="popupContactClose"><img src="close.gif" alt="close"/></a>
  <div id="contactArea"></div>
</div>
<div id="backgroundPopup"></div>

弹出式jquery

var popupStatus = 0;
function loadPopup(){
  if(popupStatus==0){
    $("#backgroundPopup").css({
        "opacity": "0.2"
    });
    $("#backgroundPopup").fadeIn("slow");
    $("#popupContact").fadeIn("slow");
    popupStatus = 1;
  }
}

function disablePopup(){
  if(popupStatus==1){
    $("#backgroundPopup").fadeOut("slow");
    $("#popupContact").fadeOut("slow");
    popupStatus = 0;
  }
}

function centerPopup(){
  var windowWidth = document.documentElement.clientWidth;
  var windowHeight = document.documentElement.clientHeight;
  var popupHeight = $("#popupContact").height();
  var popupWidth = $("#popupContact").width();
  $("#popupContact").css({
    "position": "absolute",
    "top": windowHeight/2-popupHeight/2,
    "left": windowWidth/2-popupWidth/2
  });
  $("#backgroundPopup").css({
    "height": windowHeight
  });
}

var $rp = jQuery.noConflict();
$rp(document).ready(function(){ 
  $rp("#buttonpop").click(function(){
    centerPopup();
    loadPopup();
  });
  $rp("#popupContactClose").click(function(){
    disablePopup();
  });
  $rp("#backgroundPopup").click(function(){
    disablePopup();
  });
  $rp(document).keypress(function(e){
    if(e.keyCode==27 && popupStatus==1){
        disablePopup();
    }
 });
});

注意：此弹出式jquery是一个外部jquery，我也在使用<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>。

谢谢。

Answer 1

如果您使用jQuery.noConflict()，则会阻止jQuery将jQuery别名为$。但是，您的弹出代码仍在尝试使用$。

引用jQuery，而不是$，或将代码包装在闭包中，并引用$作为闭包内的局部变量，即

(function($) {
    //popup code here
})(jQuery);

jQuery.noConflict（）不适用于弹出框

1 个答案: