在開發應用程式中我們做了一個彈出層，有時我們會做一個關閉按鈕，這樣點擊關閉就可以把彈出層關閉了，但是有時希望只要不點擊彈出層內就自動關閉彈出層了，下面我總結了三個實例。 例1 複製程式碼 程式碼如下: 程式碼如下:點選空白處關閉彈出視窗 <BR>.pop{width:200px;height:130px;background:#080;}<BR> <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> 例2,點選自身以外地方關閉彈出層 複製程式碼 程式碼如下: 程式碼如下:<BR>.hide{display:none;}<BR> <BR>$(document).ready(function() {<BR> $("div.down").click(function (e) {<BR> e.stopPropagation();<BR> $("div.con").removeClass("hide");<> ); ) {<BR> if (!$("div.con").hasClass("hide")) {<BR> > });<BR>});<BR> click show-area 例3複製代碼 代碼如下:jQuery點擊空白處關閉彈出層 <BR>#box{width:300px;height:200px;border:1px solid #000;display:none; margin :0 auto;}<BR>.btn{color:red;}<BR> <BR>$(function(){<BR> $(".btn" ).click(function(event){<BR> var e=window.event || event;<BR> if(e.stopPropagation){<BR> e.stopPropagation();<BR> } e.cancelBubble = true;<BR> } <BR> $("#box").show();<BR> });<BR> $("#box").click(function(event){<BR> var e=window.event || event;<BR> if(e.stopPropagation){<BR> e.stopPropagation();<BR> }else{<BR> <BR> });<BR> document.onclick = function(){<BR> $("#box").hide();<BR> };<BR>})<BR> };}) };}) };})打開我了,點空白關閉啊,謝謝 打開彈出層
