代码之家 › 专栏 › 技术社区 › sadiark

弹出框无法正确关闭

popup css html jquery javascript

sadiark · 技术社区 · 9 年前

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

1 回复 | 直到 9 年前

jessikwa 9 年前

我看到你发布的代码有一些问题。我不确定这是否是从整件事情中复制一部分的结果,但 </div></div></div></div> 这件事立刻引起了我的注意。我把你的东西放进了JsFiddle,然后把东西清理干净。你用了很多ID # 我个人会避免这样做,除非绝对必要。您的关闭函数可能无法工作,因为多个 #fade 元素。你会看到我用类替换了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/