JQuery YensDesign Popup

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

//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

есть несколько проблем с этим кодом, если вы собираетесь заставить его работать на мульт множественные всплывающие окна. Вам нужно будет что-то сделать, чтобы кнопка знала, какое всплывающее окно должно запускаться, а затем передавать эту информацию другим функциям. Вам также необходимо добавить класс во всплывающее окно, чтобы дать вам «root» для навигации по селекторам. Возможное решение ниже:

//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 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> 

Надеюсь, что это поможет!