Looking for JS/JQuery FULLY modal overlay [closed]

问题

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 functionality (like removing the X button or removing the esc-to-close feature).

Anyone know of a JQuery plugin or other JS library that can do this? Smaller + simpler is better...

Actually this is fairly straightforward to write myself (cover the entire page with a 100% transparent div), but it is harder to perfect (What if the user resizes the window? What about tabbing?). So ideally I'd use a plugin but I hate configuring plugins for my needs, since they seem to be never perfect for me!

回答1:

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

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

回答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);

回答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/

来源：https://stackoverflow.com/questions/7591843/looking-for-js-jquery-fully-modal-overlay

标签

javascript

jquery

html

overlay

modal-dialog