Home/ Questions/Q 9140389
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T09:30:36+00:00

I’m new to JQuery and am hoping someone can help out with the problem

  • 0

I’m new to JQuery and am hoping someone can help out with the problem I’m having.

I setup a JSFiddle Page with the issue I’m having for ease of helping me: http://jsfiddle.net/66Bwp/

The problem: When I click on the button “Test 1” or “Test 2” and then click on the black overlay that produces, the overlay disappears, however the content that was faded in stays on the page until the “cancel” button is pressed.

Interesting Side Note: If I click on the button “Test 1” or “Test 2” to produce the content effect, and then click cancel, everything works as intended (overlay and content fade out), and then if I click the button “Test 1” or “Test 2” again, without reloading the page, and then click the overlay, everything works as intended.

The Javascript File:

$(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);
    })
}

The CSS File:

#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;
}

The HTML File:

<!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>

I’m not sure what the problem could be. Does anyone have any suggestions?

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Change your lbHide function to this:

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

    jsFiddle example

    When your overlay is clicked, there is no idName parameter being passed to it, so just fade out the divs. You should probably give them classes to make them easier to refer to.

    • 0