Looking For Js/jquery Fully Modal Overlay

I need a modal overlay that will block interaction with the rest of the page and is NOT CLOSABLE by the user, but can't seem to find one where I don't have to override existing fun

Solution 1:

http://developer.yahoo.com/yui/examples/container/panel-loading.html

Luckily I'm using YUI already, just overlooked this. Exactly what I want.

Solution 2:

I think just add overlay div would be easier and requires less code, than using any library.

$('<div></div>').css({top:0,bottom:0,left:0,right:0,position:absolute,zIndex:1000}).appendTo(document.body);

Solution 3:

You can pull that off with just CSS with an overlay div that is absolutely positioned top, left, right, bottom by 0 of its container, like so:

HTML

<divclass="overlay"></div><divclass="content"><buttontype="button">Click Me!</button><buttontype="button">Click Me!</button><buttontype="button">Click Me!</button><buttontype="button">Click Me!</button><buttontype="button">Click Me!</button><buttontype="button">Click Me!</button><buttontype="button">Click Me!</button><buttontype="button">Click Me!</button><buttontype="button">Click Me!</button><buttontype="button">Click Me!</button><buttontype="button">Click Me!</button><buttontype="button">Click Me!</button></div>

CSS

.content {
    width:400px;
    height:400px;
    position:relative;
    z-index:1;
}

.overlay {
    opacity:0;
    filter: alpha(opacity = 0);
    position:absolute;
    top:0; bottom:0; left:0; right:0;
    display:block;
    z-index:2;
    background:transparent;
}

Demo http://jsfiddle.net/andresilich/WHEK3/4/