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

Есть несколько проблем с этим кодом, если вы собираетесь заставить его работать для нескольких всплывающих окон. Вам нужно будет что-то сделать, чтобы сообщить кнопке, какое всплывающее окно она должна вызывать, а затем передать эту информацию другим функциям. Вам также нужно будет добавить класс во всплывающий элемент div, чтобы получить «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:

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

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