javascript - 单击下一个弹出窗口时，第一个弹出窗口不会关闭

Question

我希望弹出窗口一次只出现一个，无论有多少个弹出窗口。因此，如果当前打开一个弹出窗口，它将关闭，而新弹出窗口将保持打开状态。我目前对它们进行了编码，以便初始链接将打开和关闭弹出窗口，并且用户应该能够单击文档中的任意位置以在打开弹出窗口后将其关闭。

我有一个jsfiddle here .

我在使用这段代码时遇到的问题:

1.如果选择另一个弹出窗口，单击的第一个弹出窗口不会消失
2.如果您单击初始链接之外的任何位置来关闭它，则必须双击该链接才能重新出现弹出窗口
3.所有弹出窗口应首先关闭

HTML:

<div id="link"><a href="#" class="showPopup" rel="one"> One</a></div>
<div class="popup popup_hide" id="one">Content</div>

<div id="link"> <a href="#" class="showPopup" rel="two"> Two</a></div>
<div class="popup popup_hide" id="two">Content <a href="#">link</a></div>

<div id="link"> <a href="#" class="showPopup" rel="three"> Three</a></div>
<div class="popup popup_hide" id="three">Content <a href="#"></a></div>

Javascript:

jQuery(document).ready(function() {

var popupStatus = 0;

if (popupStatus == 0) { // if value is 0, show popup
        $('.showPopup').click(function () {
            $('#' + $(this).attr('rel') + '_img').removeClass('border_grey');
            if ($(this).hasClass("selected")) {
                $('#' + $(this).attr('rel')).hide();
                $(this).removeClass("selected");
            } else {
                $(this).addClass("selected");
                $('#' + $(this).attr('rel') + '_img').addClass('border_grey');
                $('#' + $(this).attr('rel')).show();
                popupStatus = 1; 
            }

         return false;
        });

    }
 else if (popupStatus == 1){
         $('.popup').hide();
         popupStatus = 0;
    }

    $('.hide_popup').click(function () {
        $('img').removeClass('border_grey');
        $('.popup').hide();
        return false;
    });

    $(document).click(function (e) {
        if (e.target.class !== 'popup_hide') {
            $('.popup_hide').hide();
        }
    });

});//jQuery 结束

Answer 1

这可能会满足您的要求:

jsFiddle Demo

var rr, popupStatus = 0;

$('.popup').hide();

$('.showPopup').click(function (e) {
    rr = $(this).attr('rel');
    $('.popup').hide();
    $('#' + rr).show();
    e.stopImmediatePropagation();
});

$(document).click(function (e) {
    if (e.target.class !== 'popup_hide' && e.target.class !== 'showPopup') {
        $('.popup_hide').hide();
    }
});