Question

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

Answer 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}