jquery - 仅可见的 DIV

Question

可能重复：
如何禁用所有 div 内容

是否可以只显示 div 但不能点击其中的任何内容？像“阻塞”的div？因为我在这个 div 中有按钮、选择和一些信息，所以我只想让它可见但不工作。

Answer 1

您可以在整个窗口上添加一个透明的 div。

$('body').append($('<div style="opacity:0; z-index:10; position:fixed; top:0; left:0; right:0; bottom:0">'));

小提琴演示：http: //jsfiddle.net/HeNwE/

Answer 2

是的。您可以简单地在内容顶部放置一个与容器大小相同的绝对定位 div。这将禁止与以下元素进行交互。

<style type="text/css">
#container{
    width:300px;
    height:300px;
    }

#shield{
    width:300px;
    height:300px;
    position:absolute;
    z-index:10;
    }

<div id="container">
<div id="shield"></div>
<a href="#" title="">You can't click me</a>
</div>

Answer 3

你可以这样做

<div onclick="return false">
... <!-- insert here your buttons -->
</div>

Answer 4

Lokase 的想法是正确的。

$(".wrapper-div-class").click(function(event) {
  event.preventDefault();
});

您还可以尝试在包含所有元素的 div 顶部创建一个 100% x 100% div z-indexed。

测试 Endy 处理页面上输入元素的答案。

Answer 5

将透明 div 添加到目标 div 中，覆盖整个内容。这是一个演示：http: //jsfiddle.net/TkTx6/2/

html：

<div>
    <div></div>
    <button></button>
    <input type="text">
</div>

CSS：

div {
    width : 200px;
    height: 200px;
    background: red;        
}
div div {
    background : transparent;
    cursor: default;
    position: absolute;
}

Answer 6

在 div 上添加一个透明层：fiddle。

div {
    position: relative;
}

div:after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}​

Answer 7

在要覆盖的任何元素上使用 preventDefault：

event.preventDefault()

您也可以在特定情况下使用 stopPropagation

event.stopPropagation

Answer 8

您可以使用 Javascript 和 JQuery 在 div 上禁用所有输入元素，然后在您选择时启用它们。

例子：

$('.myDiv:input').each(function()) {
    $(this).prop('disabled', 'disabled');
}

如果您不需要动态更改输入，则只需在元素中设置 'disabled="disabled"'。

这种方法也比“不可见的 div”更好，因为如果他/她不能点击页面上的控件或选择文本，它可能会让用户非常困惑。