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。

simple jsfiddle example

Answer 2

为什么不使用blockUI并根据您想要的元素定位目标表单？使用jQuery，您可以轻松获得与文档相关的所有元素的位置。

Answer 3

要解决您的问题：请查看此处：disable all page elements with modal feature using 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');
}

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

4 个答案: