CODEWITHSUNDEEP
javascriptjquery
Ryan
Ryan

Reputation: 59

JQuery: fadein/fadeout effect

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!

Upvotes: 0

Views: 1226

Answers (2)

j08691
j08691

Reputation: 207861

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.

Upvotes: 3

Dave Sexton
Dave Sexton

Reputation: 11188

It's because when you are clicking on the overlay you are are calling the click event that you have assigned to it. The problem is that the click event uses the idName variable which has no value at this point in time.

Therefore the overlay fades but not your other elements

Upvotes: 1

Related Questions