特定のdiv以外のページ全体を無効にするにはどうすればよいですか？

Question

私は<div>要素をポップアップ持っており、それが表示されたら、その背後にあるコンテンツは<div>のコード行を使用して目立つようにopacity: 0.2に変更します。

$(".main").css("opacity", "0.2"); 

は、どのように私は後ろのコンテンツを「無効にする」ことができます<div> jQueryを使用してクリック可能にならないようにするには？

私はクリック可能なことと表示され、ポインタカーソルを防止することから、ボタンを防ぐために、これらのコード行を持っていますが、テキストはまだ強調表示することができますように、完全にコンテンツを無効にしないと、おそらく多くのがあります：

$("form :input").attr("disabled","disabled"); 
$(".main .input").css("cursor", "auto"); 

各項目の異なるコード行（ハイライトされているテキストの停止やボタンの無効化など）ではなく、文字通りページを無効にするコードは1行ありますか（divとは別）ですか？

Answer 1

基本的に2つのオプションがあります：現在の不都合（ブラウザサポート）https://developer.mozilla.org/en-US/docs/Web/CSS/user-selectを使用して、またはモーダルと実際のコンテンツの間にオーバーレイdivを追加することによって、CSS user-select: noneを選択することができます。いくつかの方法がそこにありますが、次のリンクはあなたの概要を与えるだろうし、正しい方向にあなたをポイントします： https://tympanus.net/codrops/2013/11/07/css-overlay-techniques/

が直接にクラスを切り替える個人的に私は、擬似要素技術を使用して、代わりに不透明度を更新します主な要素：

/* JS */ 
$(".main").addClass("has-overlay"); 

/* CSS */ 
.main.has-overlay { 
    opacity: 0.2; 
} 

.main:after { 
    content: ""; 
    display: none; 
    position: fixed; /* could also be absolute */ 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    z-index: 10; 
    background transparent; 
} 

.main.has-overlay:after { 
    display: block; 
}