Question

我是JQuery的新手，我希望有人可以帮助解决我遇到的问题。

我设置了一个JSFiddle页面，其中包含我正在帮助我的问题：http://jsfiddle.net/66Bwp/

问题：当我点击“测试1”或“测试2”按钮然后点击产生的黑色叠加层时，叠加层消失，但是淡入的内容会停留在页面上，直到“取消” “按下按钮。

有趣的备注：如果我点击“测试1”或“测试2”按钮产生内容效果，然后点击取消，一切都按预期工作（叠加和内容淡出），然后如果我点击再次按“测试1”或“测试2”按钮，无需重新加载页面，然后单击叠加层，一切都按预期工作。

Javascript文件：

$(document).ready(function(){
    lbHide();
})

function lbShow( idName ) {
    $("#lbOverlay, #" + idName).fadeIn(300);
}

function lbHide( idName ) {
    $("#lbOverlay, #" + idName).fadeOut(300);
    $("#lbOverlay").click(function() {
        $("#lbOverlay, #" + idName).fadeOut(300);
    })
}

CSS文件：

#lbOverlay{
    display:none;
    background:#000000;
    opacity:0.4;
    filter:alpha(opacity=90);
    position:absolute;
    top:0px;
    left:0px;
    min-width:100%;
    min-height:100%;
    z-index:1000;
}
#lbExampleOne{
    display:none;
    position:fixed;
    top:100px;
    left:50%;
    margin-left:-200px;
    width:400px;
    background:#FFFFFF;
    padding:10px 15px 10px 15px;
    border:2px solid #CCCCCC;
    z-index:1001;
}
#lbExampleTwo{
    display:none;
    position:fixed;
    top:100px;
    left:50%;
    margin-left:-200px;
    width:400px;
    background:#FFFFFF;
    padding:10px 15px 10px 15px;
    border:2px solid #CCCCCC;
    z-index:1001;
}

HTML文件：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

        <title>Lightbox Test</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="js/lightbox.js"></script>
        <link type="text/css" rel="stylesheet" href="css/master.css" />
    </head>
    <body>
        <button id="show-panel" onClick="lbShow('lbExampleOne')">Test 1</button>
        <button id="show-panel" onClick="lbShow('lbExampleTwo')">Test 2</button>
        <div id="lbExampleOne">
            <h2>Example Content One</h2>
        <p><button type="reset" id="close-panel" onClick="lbHide('lbExampleOne')">Cancel</button>
        </div>
        <div id="lbExampleTwo">
            <h2>Example Content Two</h2>
            <p><button type="reset" id="close-panel" onClick="lbHide('lbExampleTwo')">Cancel</button></p>
        </div>
        <div id="lbOverlay"></div>
    </body>
</html>

我不确定问题是什么。有没有人有任何建议？

谢谢！

Answer 1

将您的lbHide功能更改为：

function lbHide(idName) {
  $("#lbOverlay, #" + idName).fadeOut(300);
  $("#lbOverlay").click(function () {
    $("#lbOverlay, #lbExampleOne, #lbExampleTwo").fadeOut(300);
  })
}

<强> jsFiddle example

单击叠加层时，没有传递idName参数，因此只淡出div。您应该给他们一些类，以便更容易引用它们。

Answer 2

这是因为当您点击叠加层时，您正在调用已分配给它的点击事件。问题是click事件使用idName变量，此变量在此时没有值。

因此叠加层会消失但不会影响其他元素

JQuery：fadein / fadeout效果

2 个答案: