Question

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

禁用页面内容

2 个答案: