弹出框无法正确关闭_JavaScript

因此，我制作了一个带有弹出框代码的页面，并将其用于3个弹出窗口，问题是，当我单击另一个链接时，它们将无法正确关闭。 就像我打开一个弹出窗口然后在另一个弹出窗口上一样，最后一个弹出窗口没有关闭，即使我已指定关闭，它们仍会不断堆积，无法与hide配合使用，尝试过。

$(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>

我发现您发布的代码有些错误。 我不确定这是否是从整个内容中复制出来的一部分，但是</div></div></div></div>立刻引起了我的注意。 我将您拥有的内容弹出到JsFiddle中，并进行了清理。 您在#使用了很多ID，除非绝对必要，否则我个人会避免这样做。 由于多个#fade元素之间的ID冲突，您的close函数可能无法正常工作。 您会看到我用类替换了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();
            });
        }
    });
});

弹出框无法正确关闭

问题描述

1楼