Question

我需要一个模式覆盖，它会阻止与页面其余部分的交互，并且不会被用户关闭，但似乎找不到我不必覆盖现有功能的地方（比如删除X按钮）或删除esc-to-close功能。）

任何人都知道JQuery插件或其他可以执行此操作的JS库吗？更小更简单更好......

实际上这对我自己来说是相当简单的（用100％透明的div覆盖整个页面），但是很难完美（如果用户调整窗口大小怎么办？怎么样呢？）。理想情况下，我会使用插件，但我讨厌为我的需求配置插件，因为它们似乎永远不适合我！

Answer 1

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

幸运的是我已经在使用YUI了，只是忽略了这一点。正是我想要的。

Answer 2

我认为添加叠加div比使用任何库更容易，所需代码更少。

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

Answer 3

你可以用CSS完成它，它的叠加div绝对位于其容器的顶部，左侧，右侧，底部0，如下所示：

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

演示http://jsfiddle.net/andresilich/WHEK3/4/

寻找JS / JQuery FULLY模态覆盖

3 个答案: