0

我是 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>

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

谢谢！

4

2 回答 2

3

将您的 lbHide 函数更改为：

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

jsFiddle 示例

当你的覆盖被点击时，没有idName参数被传递给它，所以只是淡出 div。您可能应该为它们提供类以使它们更易于参考。

于 2013-01-16T17:31:21.450 回答
1

这是因为当您单击覆盖时，您正在调用您分配给它的单击事件。问题是点击事件使用了此时没有值的 idName 变量。

因此覆盖消失但不是你的其他元素

于 2013-01-16T17:30:59.170 回答