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 に答える