jQuery Overlay to focus on a particular div only. No Plugins please?

问题

I am trying to achieve a modal overlay using jQuery.

When a user clicks on a particular button the popup div has to open up. The rest of the page should be grayed out. In other words nothing on the page can be selected or clicked other than this pop up.

How can this be acheived?

I have written the follwing: CODE and result is HERE

I am not able to focus only on the div. For me the background is also active. How do I disable the area other than the pop up div?

HTML:

<div id="mainContainer">
  I am in the main body section.               
</div>
<input type="button" value="Show Overlay" id="btn">        
<div id="overlayContainer">
    I am in the Overlay Section<span style="float:right"><a class="alink" href="javascript:void(0);">X</a></span>
</div>

JS:

$(function() {
    $("#btn").click(function() {
        $("#overlayContainer").fadeIn();
        $("#mainContainer");
    })
    $(".alink").click(function() {
        $(this).parent().parent().hide();
    });
})

Css:

#mainContainer{border:2px solid red;width:700px;height:500px;margin:0 auto;}
#overlayContainer{background:#c0c0c0;width:300px;height:400px;right:500px;border:2px dotted blue;margin-top:-460px;display:none;position:fixed;}
input{text-align:center;margin-left:300px;margin-top:18px;position:fixed;}

回答1:

You asked for no plugins, but then tagged your question jquery-ui, which is itself a plugin. First, here's your jQuery-UI answer:

$("#overlayContainer").dialog({ modal: true });

http://jsfiddle.net/AMM2M/5/

And here's your no plugin answer:

Cover the entire page with an overlay div, then place a popup div over that. To display the popup, show and hide a common container.

http://jsfiddle.net/AMM2M/6/

<div class="popup">
    <div class="overlay"></div>
    <div class="content">
        popup content here
    </div>
</div>

.popup {
    display: none;
}
.popup .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    opacity: 0.5;
    filter: alpha(opacity=50);
    z-index: 90;
}
.popup .content {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 400px;
    width: 300px;
    margin-left: -150px;
    margin-top: -200px;
    background: #fff;
    z-index: 91;
}

$(".popup").show();

^{Answered from my Windows 7 Phone}

回答2:

Is this what you were thinking?

jquery part...

$(document).ready(function() {

    $('#lightbox_button').click(function() {
         $('#lightbox').fadeIn('slow');
         $('#lightbox_panel').fadeIn('slow');
    });

    $('#close_lightbox').click(function() {
        $('#lightbox').fadeOut('slow');
        $('#lightbox_panel').fadeOut('slow');
    });

});

HTML

<div id="wrapper">

<a href="#" id="lightbox_button">
    <div class="button">button</div>
</a>

    <div id="lightbox_panel">

        <h1>lightbox panel</h1>

        <a href="#" id="close_lightbox">
            <div class="button">close</div>
        </a>

    </div>

</div>

<div id="lightbox"></div>

CSS

#lightbox_panel 
{ 
   position: relative;
   z-index: 99; 
   width: 500px;
   height: 100px; 
   margin: 30px auto 0;
   background-color: #CCC;
   display: none;
   padding: 10px;
}

#lightbox 
{ 
   z-index: 90;
   position: absolute;
   background-color: #000;
   opacity: 0.8;
   filter: alpha(opacity=80);
   width: 100%;
   height: 100%;
   display: none;
   top: 0;
}

.button 
{ 
   position: absolute;
   text-decoration: none; 
   padding: 2px 10px; 
   border: 1px solid #000;
   display: inline-block; 
   bottom: 10px;
   left: 50%;
}

if it's not let me know I'll try to help you out. If you need any explanation in regards to the jQuery let me know.