JQuery: fadein/fadeout effect
<p>I'm new to JQuery and am hoping someone can help out with the problem I'm having.</p>

<p>I setup a JSFiddle Page with the issue I'm having for ease of helping me: <a href="http://jsfiddle.net/66Bwp/" rel="nofollow">http://jsfiddle.net/66Bwp/</a></p>

<p>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.</p>

<p>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.</p>

<p>The Javascript File:</p>

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

<p>The CSS File:</p>

<pre><code>#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;
}
</code></pre>

<p>The HTML File:</p>

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

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

<p>I'm not sure what the problem could be. Does anyone have any suggestions?</p>

<p>Thanks!</p>
