jQuery的YensDesign弹出

Question

我是很新的JS的话，请宽容我...

所以我用YensDesign弹出，我想通了如何连接到一个图像映射。

<img src="/_images/bhm-circle-chart-members.jpg" width="504" height="504" border="0" usemap="#Map" /> 
<map name="Map" id="Map"> 
<area shape="poly" coords="90,63,128,110,150,95,177,80,202,71,229,65,250,65,249,4,220,3,194,8,165,17,142,29,114,42" href="#" id="button"/> 
<area shape="poly" coords="255,5,257,64,276,68,301,73,325,83,345,91,373,109,408,61,387,42,355,25,324,13,281,3" href="#" id="button2" /> 
</map> 


<div id="popupContact"> 
     <a class="popupContactClose">x</a> 
     <h1>Title of our cool popup, yay!</h1> 
     <p id="contactArea"> 
      stuff goes here. 
     </p> 
</div> 

<div id="popupContact2"> 
     <a class="popupContactClose">x</a> 
     <h1>Title of our cool popup, yay!</h1> 
     <p id="contactArea"> 
      sutff goes here 
     </p> 
</div> 

似乎工作的伟大，如果我只有1个DIV ID ..

我想不通，如果是我想要第二个DIV ID，如何创建一个数组允许多个DIV标识...

必须有比复制和粘贴新的功能为每个DIV ID的simplier方式

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

//loading popup with jQuery magic! 
function loadPopup(){ 
    //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! 
function disablePopup(){ 
    //disables popup only if it is enabled 
    if(popupStatus==1){ 
     $(".backgroundPopup").fadeOut("slow"); 
     $("#popupContact").fadeOut("slow"); 
     popupStatus = 0; 
    } 
} 

//centering popup 
function centerPopup(){ 
    //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 
    }); 

} 


//CONTROLLING EVENTS IN jQuery 
$(document).ready(function(){ 

    //LOADING POPUP 
    //Click the button event! 
    $("#button").click(function(){ 
     //centering with css 
     centerPopup(); 
     //load popup 
     loadPopup(); 
    }); 

    //CLOSING POPUP 
    //Click the x event! 
    $(".popupContactClose").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

没有与此代码的几个问题，如果你要使它成为工作MULT iple弹出窗口。你将不得不做一些事情来让按钮知道应该触发哪个按钮，然后将该信息传递给其他功能。你还需要在弹出的div中添加一个类，为你提供一个“根”来导航到选择器。以下可能的解决方案：

//SETTING UP OUR POPUP 
//0 means disabled; 1 means enabled; 
var popupStatus = {}; 

//loading popup with jQuery magic! 
function loadPopup(popupId){ 
    //loads popup only if it is disabled 
    if(popupStatus[popupId]==0){ 
     $(".backgroundPopup").css({ 
      "opacity": "0.7" 
     }); 
     $(".backgroundPopup").fadeIn("slow"); 
     $("#" + popupId).fadeIn("slow"); 
     popupStatus[popupId] = 1; 
    } 
} 

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

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

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

} 


//CONTROLLING EVENTS IN jQuery 
$(document).ready(function(){ 
    popupStatus = { popupContact: 0, popupContact2: 0 }; 


    //LOADING POPUP 
    //Click the button event! 
    $("#button").click(function(){ 
     var popupId = $(this).attr("popup"); 
     //centering with css 
     centerPopup(popupId); 
     //load popup 
     loadPopup(popupId); 
    }); 

    //CLOSING POPUP 
    //Click the x event! 
    $(".popupContactClose").click(function(){ 
     var popupId = $(this).parents("div").attr("id"); 
     disablePopup(popupId); 
    }); 
    //Click out event! 
    $(".backgroundPopup").click(function(){ 
     // close any that are open 
     for (var popupId in popupStatus) 
     { 
      if (popupStatus[popupId] == 1) 
      disablePopup(popupId); 
     } 
    }); 
    //Press Escape event! 
    $(document).keypress(function(e){ 
     var popupId = $(e.target).parents("div.popupContact").attr("id"); 
     if(e.keyCode==27 && popupStatus[popupId]==1){ 
      disablePopup(popupId); 
     } 
    }); 

}); 

你需要的popupContact类添加到您的div：

<div id="popupContact" class="popupContact"> 
     <a class="popupContactClose">x</a> 
     <h1>Title of our cool popup, yay!</h1> 
     <p id="contactArea"> 
      stuff goes here. 
     </p> 
</div> 

<div id="popupContact2" class="popupContact"> 
     <a class="popupContactClose">x</a> 
     <h1>Title of our cool popup, yay!</h1> 
     <p id="contactArea"> 
      sutff goes here 
     </p> 
</div> 

和你需要的属性添加到您的按钮，告诉它这弹出按钮控件：

，例如，如果使用输入按钮：

<input type="button" popup="popupContact2" value="click me" /> 

或链路：

<a href="#" popup="popupContact2">Click me</a> 

希望有所帮助！