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

ロカセの考えは正しい。

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

すべての要素を含む div の上に 100% x 100% の div を z-indexed することもできます。

ページ上の入力要素を処理するための 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 onclick="return false">
... <!-- insert here your buttons -->
</div>

Answer 5

div: fiddleの上に透明レイヤーを追加します。

div {
    position: relative;
}

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

Answer 6

はい。コンテナと同じサイズの絶対位置の 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 7

オーバーライドしたいすべての要素で preventDefault を使用します。

event.preventDefault()

特定のインスタンスで stopPropagation を使用することもできます

event.stopPropagation

Answer 8

JavascriptとJQueryを使用してdivですべての入力要素を無効にし、必要に応じてそれらを有効にすることができます。

例：

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

入力を動的に変更する必要がない場合は、要素に「disabled="disabled"」を設定するだけです。

This approach is also better than the "invisible div" as it can be very confusing to a user if he/she can't click on a control on a page, or select text.