jquery_jquery에서 팝업 레이어를 닫는 세 가지 작은 예-JS 튜토리얼-php.cn

jquery_jquery에서 팝업 레이어를 닫는 세 가지 작은 예

WBOY

풀어 주다： 2016-05-16 17:17:35

원래의

1005명이 탐색했습니다.

애플리케이션을 개발하다 보면 팝업 레이어를 만들어서 닫기를 누르면 팝업 레이어가 닫히도록 하는 경우도 있습니다. 하지만 팝업 레이어가 다음과 같이 자동으로 닫히길 바라는 경우도 있습니다. 팝업 레이어 내부를 클릭하지 않는 한 아래에는 세 가지 예가 요약되어 있습니다.
예제 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><script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script>
</head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><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 팝업 레이어를 닫으려면 빈 공간을 클릭하세요

열기 저, 공백이 닫혔습니다. 감사합니다

팝업 레이어 열기