javascript - 弹出框无法正常关闭

Question

所以我制作了一个带有弹出框代码的页面，并将其用于 3 个弹出窗口，问题是，当我单击另一个链接时，它们无法正确关闭。就像我打开一个弹出窗口然后打开另一个弹出窗口一样，最后一个弹出窗口没有关闭并且即使我指定关闭它们也会继续堆叠，不会与隐藏一起使用，试过了。

$(document).ready(function() {//$('a.poplight[href^=#]').click(function(){
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
var popMargTop = ($('#' + popID).height() + 10) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
return false;
});
$('a.close, #fade').live('click', function() {
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});

CSS:

.popup_block{
    display:none;
    background:#151515;
    padding:20px;
    float:left;
    position:fixed;
    top:40%;left:50%;
    z-index: 99999;
    line-height:20px;

}

*html #fade {position: absolute;}
*html .popup_block {position: absolute;}
#fade {
    display:none;
    position:fixed;
    left:30%;
    top:0px;
    width:70%;
    height:100%;
    z-index:9999;
    background:#000; /* change to #fff for solid white */
    opacity:1; /* change to opacity:1; */
}

HTML:

<div id="box1" class="popup_block">
HEY
</div>
 <div id="box2" class="popup_block">
    YO
 </DIV>
  <div id="box3" class="popup_block">
 hello
 </div>
</div></div></div></div></div></div></div></div></div></div>

Answer 1

我发现您发布的代码有一些问题。我不确定这是否是从整件事中复制一部分的结果，但是 </div></div></div></div>事情立刻引起了我的注意。我将你拥有的东西弹出到 JsFiddle 中并进行了清理。您在 # 中使用了很多 ID ，除非绝对必要，否则我个人会避免这样做。由于多个 #fade 之间的 ID 冲突，您的关闭功能可能无法正常工作。元素。您会看到我用类替换了 ID，并且它有效。

$("document").ready(function() {
    $("a").click(function () {
        var popID = $(this).attr("class"); 
        var tarDiv = $("div." + popID);
        var popMargTop = (tarDiv.height() + 10) / 2;
        var popMargLeft = (tarDiv.width() + 80) / 2; 
        tarDiv.fadeIn()
            .css({
                "width": 300,
                "margin-top": -popMargTop,
                "margin-left": -popMargLeft
            });
        var closeA = $("<a href=\"#\" class=\"close\">X</a>");
        closeA.appendTo(tarDiv)
            .click(closeMe);
        var fadeDiv = $("<div class=\"fade\" style=\"filter:alpha(opacity=80);\" />");
        fadeDiv.appendTo($("body"))
            .fadeIn()
            .click(closeMe);
        function closeMe() {
            $(".fade , .popup_block").fadeOut(function() {
                $(".fade, a.close").remove();
            });
        }
    });
});

http://jsfiddle.net/jessikwa/kprwnzcc/