javascript - 同一页面上 jQuery PopUp 的多个实例

Question

我在我的网站上使用 jQuery PopUp，并希望在同一页面上有多个实例，但我不知道如何做到这一点...

这是我正在使用的js

//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({
        "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!
    $("#newboatbutton").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();
        }
    });

});

这是我的 HMTL

 <div id="popupContact">
<a id="popupContactClose">x</a>
<?php
require 'newboat.php';
?>
</div>
<div id="backgroundPopup"></div>

全部通过此按钮激活

<div id="newboatbutton" style="float: left; margin-top: 18px; margin-left: 15px;"><input type="submit" value="Add new Boat" /></div>

任何帮助都会很有用，谢谢...

Answer 1

这是一个很好的示例，说明如何重用函数。您可以在这里看到它的实际效果:http://jsfiddle.net/y1ffwnfn/这只是一个基本示例，但应该为您提供一个良好的起点。

<div id="popup1" style="display:none;">Popup 1</div>
<div id="popup2" style="display:none;">Popup 2</div>
<div id="popup3" style="display:none;">Popup 3</div>
<div id="myButton"><input type="button" value="Show Popup" /></div>
<script>
    function loadPopup(popupId){
        $("#" + popupId).fadeIn("slow");
    }

    $(document).ready(function(){
        $("#myButton").click(function () {
            if ($("#popup1").is(":hidden") && $("#popup2").is(":hidden") && $("#popup3").is(":hidden")) {
                loadPopup("popup1");
            }
            else if ($("#popup1").is(":visible") && $("#popup2").is(":hidden") && $("#popup3").is(":hidden")) {
                loadPopup("popup2");
            }
            else if ($("#popup1").is(":visible") && $("#popup2").is(":visible") && $("#popup3").is(":hidden")) {
                loadPopup("popup3");
            }
        });
    });
</script>