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>

似乎工作很好，如果我只有一个DIV ID..

我不明白的是，如果我想要第二个DIV ID，如何创建一个数组来允许多个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>

希望这能有所帮助！