ページコンテンツを無効にする

Question

私の検索テキストボックスはヘッダーに配置されています。テキストボックスに入力すると、残りのページを無効にしたい（ヘッダーを除く）。ページはグレイアウトされている必要があります。ヘッダとメインの2つの別々のdivがあります。メインのdivには、コンテンツを構成するいくつかのsub divが含まれています。

どうすればこの問題を解決できますか？

Answer 1

はい、CSSプロパティを使用して行うことができます。

$("#text1").keydown(function() { 
 
$(".main").css({ 
 
    "text-indent": "-9999px", 
 
    "background-color": "gray" 
 
}) 
 
}); 
 

 
$("#text1").focusout(function() { 
 
$(".main").css({ 
 
    "text-indent": "0px", 
 
    "background-color": "red" 
 
    
 
}) 
 
});

.header { 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: blue; 
 
} 
 

 
.main { 
 
    width: 100%; 
 
    height: 450px; 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="header"> 
 
    <input type="text" id="text1"> 
 
</div> 
 

 
<div class="main">Content that is going to hide when textbox is changed</div>

はそれが役に立てば幸い:)

Answer 2

@Thinkerソリューションが良いです（"text-indent": "-9999px"を使用すると良いでしょう場合、私はわからないが）。別のオプションは、メインdivに別のdivを追加し、適切な結果を得るために不透明度の設定で再生することです。デモを見て、コンテナのdivは、メインのdivの親としてのに必要であると考えている：

$("#text1").keydown(function() { 
 
    $(".main").append('<div class="overlay"></div>'); 
 
});

.header { 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: blue; 
 
} 
 

 
.main { 
 
    width: 100%; 
 
    height: 450px; 
 
    background-color: red; 
 
} 
 
.container{ 
 
    position:relative; 
 
} 
 
.overlay{ 
 
    width:100%; 
 
    height:100%; 
 
    background-color:grey; 
 
    position:absolute; 
 
    top:0px; 
 
    left:0px; 
 
    opacity:0.8; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="header"> 
 
    <input type="text" id="text1"> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="main">Content that is going to hide when textbox is changed</div> 
 
</div>