0

I'm using the following code to open a DIV container on my home page. It works great but it's a little clunky because you have to close (x) out the open DIV before you can open another one. I have three on a page. Ideally, if I have DIV#A open, and I click on button B to open DIV#B, I'd like to have DIV#A close and DIV#B open at once.

Can anyone help?

This is my JavaScript:

jQuery(function ($) {
    // click trigger for popup 1
    $("a.topopup").click(function () {
        loading(); // loading
        setTimeout(function () { // then show popup, delay in .5 second
            loadPopup(); // function show popup 
        }, 100); // .5 second
        $("#toPopup_2, #toPopup_3").hide();

        return false;
    });
    // click trigger for popup 2
    $("a.topopup_2").click(function () {
        loading(); // loading
        setTimeout(function () { // then show popup, delay in .5 second
            loadPopup_2(); // function show popup 
        }, 100); // .5 second
        $("#toPopup, #toPopup_3").hide();
        return false;
    });
    // click trigger for popup 3
    $("a.topopup_3").click(function () {
        loading(); // loading
        setTimeout(function () { // then show popup, delay in .5 second
            loadPopup_3(); // function show popup 
        }, 100); // .5 second
        return false;
        $("#toPopup, #toPopup_2").hide();
    });

    /* event for close the popup */
    $("div.close").hover(

    function () {
        $('span.ecs_tooltip').show();
    },

    function () {
        $('span.ecs_tooltip').hide();
    });

    $("div.close").click(function () {
        disablePopup(); // function close pop up
    });

    $(this).keyup(function (event) {
        if (event.which == 27) { // 27 is 'Ecs' in the keyboard
            disablePopup(); // function close pop up
        }
    });

    $("div#backgroundPopup").click(function () {
        disablePopup(); // function close pop up
    });

    $('a.livebox').click(function () {
        alert('Hello World!');
        return false;
    });


    /************** start: functions. **************/
    function loading() {
        $("div.loader").show();
    }

    function closeloading() {
        $("div.loader").fadeOut('normal');
    }

    var popupStatus = 0; // set value

    // load popup 1
    function loadPopup() {
        if (popupStatus == 0) { // if value is 0, show popup
            closeloading(); // fadeout loading
            $("#toPopup").fadeIn(0500); // fadein popup div
            $("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8
            $("#backgroundPopup").fadeIn(0001);
            popupStatus = 1; // and set value to 1
        }
    }
    // load popup 2
    function loadPopup_2() {
        if (popupStatus == 0) { // if value is 0, show popup
            closeloading(); // fadeout loading
            $("#toPopup_2").fadeIn(0500); // fadein popup div
            $("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8
            $("#backgroundPopup").fadeIn(0001);
            popupStatus = 1; // and set value to 1
        }
    }
    // load popup 2
    function loadPopup_3() {
        if (popupStatus == 0) { // if value is 0, show popup
            closeloading(); // fadeout loading
            $("#toPopup_3").fadeIn(0500); // fadein popup div
            $("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8
            $("#backgroundPopup").fadeIn(0001);
            popupStatus = 1; // and set value to 1
        }
    }

    // function close popups
    function disablePopup() {
        if (popupStatus == 1) { // if value is 1, close popup

            $("#toPopup").fadeOut("normal");
            $("#toPopup_2").fadeOut("normal");
            $("#toPopup_3").fadeOut("normal");

            $("#backgroundPopup").fadeOut("normal");
            popupStatus = 0; // and set value to 0
        }
    }

    /************** end: functions. **************/
}); // jQuery End

This is how I'm calling it from my page:

<div id="popupcontainer">
    <div id="toPopup">
        <div class="close"></div>
        <div id="popup_content">Content 1 Goes Here</div>
    </div>
    <div id="toPopup_2">
        <div class="close"></div>
        <div id="popup_content">Content 2 Goes Here</div>
    </div>
    <div id="toPopup_3">
        <div class="close"></div>
        <div id="popup_content">Content 3 Goes Here</div>
        <!--toPopup end-->
4

1 回答 1

0

您的脚本在这里发生了很多事情。最引人注目的是大量的代码重复。我在做你想做的事时把它浓缩了，一键关闭打开的弹出窗口，然后显示被点击的那个。

这是完整的 HTML 和 javascript cahnges 的 jsfiddle。以下是我所做的总结：

将每个弹出窗口的 id 更改为一个公共类（编辑也将 id="popup_content" 更改为一个类。页面上不能有重复的 id）：

<div class="topopup">
    <div class="close">close</div>
    <div class="popup_content">Content 1 Goes Here</div>
</div>
<div class="topopup">
    <div class="close">close</div>
    <div class="popup_content">Content 2 Goes Here</div>
</div>
...

接下来，我将您单独的功能合二为一。那是

$("a.topopup").click(function () {
    //...
    $("#toPopup_2, #toPopup_3").hide();
    //....
    return false;
});

$("a.topopup_2").click(function () {
    //...
    $("#toPopup, #toPopup_3").hide();
    //....
    return false;
});

//etc

到单个功能（编辑：当它在 div 中时，您有 a.topopup。应该是 div.topopup）：

$("div.topopup").click(function () {
    loading(); // loading

    //hide all open popups
    $(".topopup").hide();

    //show the popup and stuff
    var storedThis = this;
    setTimeout(function () { // then show popup, delay in .5 second
        loadPopup(storedThis);
    }, 100); // .5 second

    return false;
});

最后，您可以类似地将您的 3 个 loadPopup() 函数组合到

function loadPopup(popup) {
    closeloading(); // fadeout loading
    $(popup).fadeIn(0500); // fadein popup div
    $("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8
    $("#backgroundPopup").fadeIn(0001);
}

清理工作可能还有更多工作要做，但这应该可以帮助您入门。诀窍是将所有弹出窗口放在一个公共类中，以便它们都可以被同等对待并使您的代码可重用。

于 2013-07-10T21:42:58.630 回答