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

Question

我希望弹出窗口只能一次显示一个，不管有多少弹出窗口。因此，如果一个弹出窗口目前打开，它将关闭，新窗口将保持打开状态。我目前已将它们编码，因此初始链接将打开并关闭弹出窗口，并且用户应该能够在文档中的任意位置单击以在打开后关闭弹出窗口。

我有一个jsfiddle here。我这个代码有

问题：

1.在第一弹出单击了不会消失，如果另一个选择
2.You需要双击链接，使您任意位置单击，除了弹出再现在inital链接关闭
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 End

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

}) 

最好