CSSを使用して領域を解除できないようにするにはどうすればよいですか？

Question

は私が唯一のCSSで一度それを無効にすることができますどのような方法があり、私はいくつかのリンクや画像を含んでいるラッパーのdivを持っている場合のは、言ってみましょうか？答えの見直し後

---

：
私はCSSでそれを作ることができるという考えを落としました。 jQuery blockUIプラグインは、charmのように機能します。

Answer 1

あなたはjQueryのを使用しようとしている場合、あなたは簡単にblockUIプラグインでこれを達成することができます。 ...またはCSSであなたの質問に答えるには、あなたがブロックしたいコンテンツの上にdivを絶対に置く必要があります。絶対に配置されたdivが、Zインデックス作成の目的でブロックされるコンテンツの後に来るようにしてください。

<div style="position:relative;width: 200px;height: 200px;background-color:green"> 
    <div> 
     <a href="#">Content to be blocked.</a> 
    </div> 
    <div style="position: absolute;top:0;left:0;width: 200px;height:200px;background-color: blue;z-index:2;opacity:0.4;filter: alpha(opacity = 50)"></div> 
</div> 

ごめんなさいすべてのインラインCSS。いいクラスを作る必要があります。また、これはFirefoxとIE7でのみテストされています。

Answer 2

他のクリック不可要素で覆い隠してください。この「カバー」のオン/オフを切り替えるには、JavaScriptを使用する必要があります。半透明にしたり、何か賢いものを作ることができます。

<style> 
    #cover {position:absolute;background-color:#000;opacity:0.4;} 
</style> 

<div id="clickable-stuff"> 
    ... 
</div> 
<div id="cover"> 
</div> 

<script type="text/javascript"> 
    function coverUp() { 
     var cover = document.getElementById('cover'); 
     var areaToCover = document.getElementById('clickable-stuff'); 
     cover.style.display = 'block'; 
     cover.style.width = //get areaToCover's width 
     cover.style.height = //get areaToCover's height 
     cover.style.left = //get areaToCover's absolute left position 
     cover.style.top = //get areaToCover's absolute top position 
    } 

    /* 
     Check out jQuery or another library which makes 
     it quick and easy to get things like absolute position 
     of an element 
    */ 
</script> 

Answer 3

ユーザーがコピーして貼り付けたり、何らかの理由でデータを保存したりすることができないように、クリップできないことを意味する場合。これは決して可能ではありませんでした。すべてのこれらのサイトは健全である/彼らは実際にはない節約のものをブロックするいくつかの方法を持っているように見えるし、それらの場所に置く措置は簡単に回避されます。

Answer 4

あなたはjQueryののevent.preventDefault機能を適用することを検討すべきです。 ここでは、例を見つけることができます。

http://api.jquery.com/event.preventDefault/

TL; DR-バージョン：

$("#element-to-block").click(function(event) { 
    event.preventDefault(); 
} 

BAM！

Answer 5

あり、そのためのCSSルールがあるが、それは広くために古いブラウザで使用されていないが、あなただけのコンテンツ上に擬似要素を配置することができ、これらの日

pointer-events: none;

Answer 6

をサポートしています。

.blocked 
{ 
    position:relative; 
} 
.blocked:after 
{ 
    content: ''; 
    position: absolute; 
    left:0; 
    right:0; 
    top:0; 
    bottom:0; 
    z-index:1; 
    background: transparent; 
} 

http://jsfiddle.net/HE5wR/27/