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

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();
    }
});

Answer 2

首先要提到的是，你应该重新编写你的 html，因为它包含同名的 Id，这不应该，因为元素 Id 应该是唯一的。

我不确定这是否是您要查找的内容，但我稍微更新了您的代码，所以这可能是您的一些起点

HTML

<div id="link1"> 
    <a href="#" class="showPopup" rel="popup_brain"> hello</a>
</div>
<div class="popup popup_hide" id="popup_brain">Content</div>
<div id="link2"> <a href="#" class="showPopup" rel="heart"> Goodbye</a> 
</div>
<div class="popup popup_hide" id="heart">Content <a href="#">hi</a></div>

JS

jQuery(document).ready(function(){

  $('.popup_hide').hide()

  $('#link1').click(function(){
          $('#popup_brain').show()
          $('#heart').hide()
  })

  $('#link2').click(function(){
          $('#heart').show()
          $('#popup_brain').hide()
  })

})

最好的