페이지 내용 사용 안 함

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를 추가하고 적절한 결과를 얻기 위해 불투명도 설정으로 재생하는 것입니다. 마음에 컨테이너 사업부는 등 주요 사업부의 부모 불구하고 필요한 것을, 데모를 보면 :

$("#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>