jquery_jquery でポップアップレイヤーを閉じる 3 つの小さな例-jsチュートリアル-php.cn

jquery_jquery でポップアップレイヤーを閉じる 3 つの小さな例

WBOY

リリース： 2016-05-16 17:17:35

オリジナル

1002 人が閲覧しました

アプリケーションの開発では、閉じるボタンを作成して、[閉じる]をクリックするとポップアップレイヤーが自動的に閉じられるようにすることがあります。ポップアップレイヤー内をクリックしない限り、以下に 3 つの例をまとめました。
例 1

< ;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

空白部分をクリックしてポップアップウィンドウを閉じます< /title><BR><BR> メタ http-equiv="content-type" content="text/html;charset=gb2312"><BR><BR> Pop{幅: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></div> <p> <br>例 2、それ自体以外の場所をクリックしてポップアップレイヤーを閉じます</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><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> $ (document).click(function() {<br> );<br> }<br> });<br>});<br></script><br><body><br> ;<br> <div class="con Hide">show-area</div><br></body><br></html><br> </div> " -//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><p><html xmlns="http : //www.w3.org/1999/xhtml"><br><head></p> <div class="codetitle"><title>jQuery 空白部分をクリックしてポップアップレイヤーを閉じます

開く私をクリックしてください。空白は閉じています、ありがとうございます

ポップアップレイヤーを開きます