使用此代码创建多个弹出窗口

Question

我正在尝试学习jQuery和弹出窗口。我通过Google找到了这个代码，它很好地工作。 问题是，这个设计只允许通过这个javascript创建一个弹出窗口。我看到作者写道;

code

如果你想创建多个弹出窗口，而不为每一个你需要创建一个JavaScript对象弹出一个部门，那么你就可以创建弹出对象的多个实例。

更新：下面是我现在使用的代码。我尝试了你的方式，但仍然没有快乐。现在，我无法按照自己的帖子理解的方式创建和弹出窗口。 我回到它的下面，仍然有问题。 Appriciate帮助我。我不明白这是否很难做到这一点。

/***************************/ 
//@Author: Adrian "yEnS" Mato Gondelle 
//@website: www.yensdesign.com 
//@email: yensamg@gmail.com 
//@license: Feel free to use it, but keep this credits please!     
/***************************/ 


var popupStatus = 0; 

function loadPopup() 
{ 
    if(popupStatus == 0) 
    { 
     $("#backgroundPopup").css({ 
      "opacity": "0.09" 
     }); 

     $("#backgroundPopup").fadeIn("slow"); 
     $("#myPopup").fadeIn("slow"); 
     popupStatus = 1; 
    } 
} 

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

//centering popup 
function centerPopup() 
{ 
    //request data for centering 
    var windowWidth = document.documentElement.clientWidth; 
    var windowHeight = document.documentElement.clientHeight; 
    var popupHeight = $("#myPopup").height(); 
    var popupWidth = $("#myPopup").width(); 

    $("#myPopup").css({ 
     "position": "absolute", 
     "top": windowHeight/2 - popupHeight/2, 
     "left": windowWidth/2 - popupWidth/2 
    }); 

    $("#backgroundPopup").css({ 
     "height": windowHeight 
    }); 
} 

$(document).ready(function(){ 

    $("#displaypopup").click(function(){ 
     //centering with css 
     centerPopup(); 
     //load popup 
     loadPopup(); 
    }); 

    //CLOSING POPUP 
    //Click the x event! 
    $("#popupClose").click(function(){ 
     disablePopup(); 
    }); 
    //Click out event! 
    $("#backgroundPopup").click(function(){ 
     disablePopup(); 
    }); 
    //Press Escape event! 
    $(document).keypress(function(e){ 
     if(e.keyCode == 27 && popupStatus == 1){ 
      disablePopup(); 
     } 
    }); 

}); 

Answer 1

你可以尝试改变这个功能，以及更重要的popupStatus孤立的对象，所以popupStatus可以在网页许多不同的jQuery的对象不同。

我想是这样的：

function PopUP(backgroundPopup, popupContact) 
{ 
    /***************************/ 
    //@Author: Adrian "yEnS" Mato Gondelle 
    //@website: www.yensdesign.com 
    //@email: yensamg@gmail.com 
    //@license: Feel free to use it, but keep this credits please!     
    /***************************/ 

    //SETTING UP OUR POPUP 
    //0 means disabled; 1 means enabled; 
    this.popupStatus = 0; 

    //loading popup with jQuery magic! 

    //notice $("#backgroundPopup") --> 
    this.loadPopup = function(){ 
     //loads popup only if it is disabled 
     if(popupStatus == 0) 
     { 
      $(backgroundPopup).css({ 
       "opacity": "0.7" 
      }); 
      $(backgroundPopup).fadeIn("slow"); 
      $(popupContact).fadeIn("slow"); 
      popupStatus = 1; 
     } 
    } 

    //disabling popup with jQuery magic! 
    this.disablePopup = function(){ 
     //disables popup only if it is enabled 
     if(popupStatus == 1) 
     { 
      $(backgroundPopup).fadeOut("slow"); 
      $(popupContact).fadeOut("slow"); 
      popupStatus = 0; 
     } 
    } 

    //centering popup 
    this.centerPopup = function(){ 
     //request data for centering 
     var windowWidth = document.documentElement.clientWidth; 
     var windowHeight = document.documentElement.clientHeight; 
     var popupHeight = $(popupContact).height(); 
     var popupWidth = $(popupContact).width(); 
     //centering 
     $(popupContact).css({ 
      "position": "absolute", 
      "top": windowHeight/2 - popupHeight/2, 
      "left": windowWidth/2 - popupWidth/2 
     }); 
     //only need force for IE6 
     $(backgroundPopup).css({ 
      "height": windowHeight 
     }); 
    } 
} 

注意，你不能硬码弹出元素的ID，有需要为每弹出不同的ID。这就是为什么这个函数中有参数，这也是一个对象。 所以，你会以某事物一样，创建这个功能类的实例：

//Click the button event!backgroundPopupID 
backgroundPopupID = "#backgroundPopup"; 
popupContactID = "#popupContact"; 
var popup1 = new PopUP(backgroundPopupID ,popupContactID); 

$("#button").click(popup1.centerPopup(),popup1.loadPopup());//not sure if this works 

其实我不使用JavaScript对象，很多时候，所以我可能会删除popupStatus和代替，我想补充一个类弹出，所以我可以检查弹出是启用还是禁用。您可以使用$(selector).hasClass(className)和$(selector).addClass(className)。您还应该使用弹出式选择器对每个函数进行参数化（就像上面例子中的这个函数级）。

Answer 2

我花了几个小时来修改这个JavaScript的代码，但我放弃了，寻找一个更简单的解决方案。我选择了colorbox非常方便和易于使用。

http://www.aobaba.com/_multiplepopup/

，你可以从这里下载安装包： http://www.aobaba.com/_multiplepopup/colorbox_multiplepopup.zip