애플리케이션을 개발하다 보면 팝업 레이어를 만들어서 닫기를 누르면 팝업 레이어가 닫히도록 하는 경우도 있습니다. 하지만 팝업 레이어가 다음과 같이 자동으로 닫히길 바라는 경우도 있습니다. 팝업 레이어 내부를 클릭하지 않는 한 아래에는 세 가지 예가 요약되어 있습니다.
예제 1
< ;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
팝업 창을 닫으려면 빈 공간을 클릭하세요< /title><br>< 메타 http-equiv="content-type" content="text/html;charset=gb2312"><br><style type="text/css"><br>. 팝{너비:200px;높이: 130px;배경:#080;}<br></style><br><script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min .js"></ script><br><script type="text/javascript"><br>$(function(){<br> $(document).bind("click",function( e){<br> var target = $(e.target);<br> if(target.closest(".pop").length == 0){<br> $(".pop").hide( );<br> }<br> }) <br>})<br></script><br></head><br><body><br><div class="pop" ></div><br></body><br></html><br>
</div>
<p>예시 2, 자신이 아닌 다른 곳을 클릭하면 팝업 레이어가 닫힙니다<br></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="51973" class="copybut" id="copybut51973" onclick="doCopy('code51973')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다 :</div>
<div class="codebody" id="code51973">
<br><html><br><style><br>.hide{display:none;}<br></style><br><script type="text /javascript" src="jquery-1.6 .1.min.js"></script><br><script type="text/javascript"><br>$(document).ready(function( ) {<br> $("div .down").click(function(e) {<br> e.stopPropagation();<br> $("div.con").removeClass("hide");<br> });<br> $ (문서).click(function() {<br> 이 > ;<br> <div class="con hide">show-area</div><br></body><br></html><br> <br><br>
" -//W3C//DTD XHTML 1.0 전환//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br><html xmlns="http : //www.w3.org/1999/xhtml"><br><head><br><title>jQuery 팝업 레이어를 닫으려면 빈 공간을 클릭하세요
열기 저, 공백이 닫혔습니다. 감사합니다
팝업 레이어 열기
