禁用页面内容

Question

我的搜索文本框位于标题中。在文本框中输入时，我想禁用页面的其余部分（标题除外）。该页面应该是灰色的。有两个单独的 div：标题和主。主 div 包含几个子 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>