Question

可能重复：
How to disable all div content

是否可以只显示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

Lokase有正确的想法。

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

您还可以尝试在包含所有元素的div顶部使用100％x 100％div z-index。

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

Answer 3

在目标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 4

是。您可以在内容顶部放置一个与容器大小相同的绝对定位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 5

你可以这样做

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

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”更好，因为如果用户无法点击页面上的控件或选择文本，它可能会让用户感到非常困惑。

只有可见的DIV

8 个答案: