Question

所以我创建了一个带有弹出框代码的页面，我使用它进行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>

Answer 1

我发现您发布的代码存在一些问题。我不确定这是否只是复制了整件事件的一部分，但是</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();
            });
        }
    });
});

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

弹出框无法正常关闭

1 个答案: