팝업을 닫기 위해 jQuery가 자신이 아닌 다른 곳을 클릭하는 간단한 예

주요 기능은 클릭하여 표시한 다음 페이지의 아무 곳이나 클릭하여 표시 효과를 끄는 것입니다. 주로 $(document).click의 기능입니다

개발 과정에서 일부 팝업 레이어가 나타나는 경우가 있는데, 팝업 이후 페이지의 다른 곳을 클릭하면 자동으로 닫히게 됩니다. 구현 코드는 다음과 같습니다.

HTML 코드:

코드 복사 코드는 다음과 같습니다.

클릭

show-area

CSS 코드 ：
.hide{display:none;}

JS 코드

코드 복사 코드는 다음과 같습니다.

$ (문서).ready(function(){
$("div.down").click(function(e){
e.stopPropagation();
$("div.con ").removeClass("hide");
});
$(document).click(function(){
if(!$("div.con").hasClass("hide" )){
$("div.con").addClass("hide");
}
});
});

확인, 테스트해 보세요. 로컬에서 CSS 스타일을 직접 수정해 보세요!