1

我有一个项目，我希望在相对于其他页面元素的特定位置打开一个表单。我还想在表单打开时阻止非表单页面项目。我玩过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）包来解决这个问题？

谢谢！- 布雷特

4

4 回答 4

1

创建一个大小与屏幕匹配的 div，绝对定位，给它一个 998 的 z-index 或其他值，然后给你想要畅通无阻的 z-index 999 的项目。

简单的jsfiddle示例

于 2011-09-17T22:39:19.460 回答
0

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

于 2011-09-17T22:36:44.130 回答
0

我喜欢提供的解决方案，但没有一个是完全正确的。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');
}
于 2011-09-24T23:52:01.333 回答
0

为了解决您的问题：看这里： 使用 jquery 禁用所有具有模式功能的页面元素

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

我个人使用过blockUI，效果很好。它像宣传的那样工作。:-)

于 2011-09-17T22:40:32.537 回答