是否有一个 jQuery 包可以阻止除绝对定位的 DIV 之外的所有 UI？

Question

我有一个项目，我希望在相对于其他页面元素的特定位置打开一个表单。我还想在表单打开时阻止非表单页面项目。我已经尝试过 blockUI，但似乎我只能相对于浏览器窗口定位非阻塞 DIV。这对于模态来说很好，但对于我的情况来说不太好。

让我看看是否可以用一个例子来澄清。假设我有一些代码，例如：

<div style="position:relative; height:400px; width:600px;">
  <p>This content should be blocked, as well as anything not in the next div</p>
  <div id="non-blocked-content" style="position:absolute; top:40px; left: 200px; width:300px; height:200px;">
    <form>
       <label>This should not be blocked</label>
       <input type="text" name="name">          
    </form>
  </div>
</div>

我希望表单显示并可用，但页面的其余内容应被阻止。有谁知道 javascript（最好是 jQuery）包可以实现这一点？

谢谢！ ——布雷特

Answer 1

创建一个尺寸与屏幕匹配的 div，将其绝对定位，给它一个 998 或其他值的 z-index，然后给您想要的未阻塞的项目 z-index 999

。 net/dLWzX/" rel="nofollow">简单的 jsfiddle 示例

Answer 2

为什么不使用 blockUI 并将预期的表单定位到您想要的元素呢？使用 jQuery，您可以轻松获取所有元素相对于文档的位置。

Answer 3

要解决您的问题：请查看此处：禁用所有使用 jquery 具有模态功能的页面元素

请记住，仅针对表单特定部分的模态行为可能会让用户感到非常迷惑，这就是为什么模态行为通常是通过显示在其他所有内容之上的对话框来实现的。

我个人使用过blockUI，效果不错。它的作用正如广告所宣传的那样。 :-)

Answer 4

我喜欢所提供的解决方案，但没有一个是完全正确的。 Paul 的代码将元素的宽度和高度设置为窗口的宽度和高度。如果您有一个大页面并且向下滚动一段距离，则屏幕的被阻挡部分将不会覆盖您正在查看的区域。

我使用的代码如下所示：

$('<div/>').css({
    'width':$('body').width(),
    'height' :$('body').height()
}).appendTo('body').attr('id', 'overlay');

.. 覆盖层的样式如下...

#overlay {
  position:absolute;
  top:0;
  left:0;
  z-index:998;
  background:url('/images/global/pixel-black-opacity-70-percent.png');
}