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

<div class="overlay"></div>
<div class="content">
    <button type="button">Click Me!</button>
    <button type="button">Click Me!</button>
    <button type="button">Click Me!</button>
    <button type="button">Click Me!</button>
    <button type="button">Click Me!</button>
    <button type="button">Click Me!</button>
    <button type="button">Click Me!</button>
    <button type="button">Click Me!</button>
    <button type="button">Click Me!</button>
    <button type="button">Click Me!</button>
    <button type="button">Click Me!</button>
    <button type="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/