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 wor

Solution 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/

<divclass="popup"><divclass="overlay"></div><divclass="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();

Solution 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

<divid="wrapper"><ahref="#"id="lightbox_button"><divclass="button">button</div></a><divid="lightbox_panel"><h1>lightbox panel</h1><ahref="#"id="close_lightbox"><divclass="button">close</div></a></div></div><divid="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: 2px10px; 
   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.

Solution 3:

Yuo can have an additional grey layer placed below your overlay with transparency at 50% stretched to 100% size.