快捷導(dǎo)航

點(diǎn)擊彈出層外區(qū)域關(guān)閉彈出層jquery特效示例

更新時(shí)間：2013年08月25日 13:06:23 作者：

擊彈出層，點(diǎn)擊彈出層外區(qū)域關(guān)閉彈出層，點(diǎn)擊關(guān)閉關(guān)閉彈出層jquery特效，具體代碼如下，喜歡的朋友可以學(xué)習(xí)下

點(diǎn)擊彈出層外區(qū)域關(guān)閉彈出層jquery特效,廢話不說(shuō)，上代碼，簡(jiǎn)潔明了：

 
<html> 
<head> 
<style> 
.hide{display:none;} 
.con{width:500px;height:300px;background:#000;} 
</style> 
<title>點(diǎn)擊彈出層 ，點(diǎn)擊彈出層外區(qū)域關(guān)閉彈出層jquery特效</title> 
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$("div.down").click(function(e) { 
e.stopPropagation(); 
$("div.con").removeClass("hide"); 
}); 
$("div.con a").click(function() { 
$("div.con").addClass("hide"); 
}); 

$(document).click(function() { 
if (!$("div.con").hasClass("hide")) { 
$("div.con").addClass("hide"); 
} 
}); 

$("div.con").click(function (e) { 
e.stopPropagation();//阻止事件向上冒泡 
}); 


}); 
</script> 
</head> 
<body> 
<div class="down">click</div> 
<div class="con hide">show-area 
<a style="color:#fff;">關(guān)閉</a> 

</div> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

JQuery 在文檔中查找指定name的元素并移除的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇JQuery 在文檔中查找指定name的元素并移除的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
使用jQuery實(shí)現(xiàn)驗(yàn)證上傳圖片的格式與大小
在項(xiàng)目中，我們經(jīng)常要遇到上傳圖片，這就需要我們必須要驗(yàn)證圖片的格式與大小，那么如何來(lái)操作呢，今天就給大家分享一個(gè)非常簡(jiǎn)單的jQuery驗(yàn)證上傳圖片的格式與大小的代碼。
2014-12-12
淺談jQuery中的事件
本文給大家分享的是個(gè)人關(guān)于jQuery中事件的理解，主要向大家介紹了jQuery中事件的綁定，合成、以及事件冒泡、阻止事件等內(nèi)容，希望大家能夠喜歡。
2015-03-03
Easyui Datagrid自定義按鈕列(最后面的操作列)
做項(xiàng)目的時(shí)候因?yàn)樾枨?要在表格的最后添加一列操作列,easyUI貌似沒(méi)有提供這種功能，下面我們來(lái)自定義按鈕列，具體實(shí)現(xiàn)代碼，大家參考下本文吧
2017-07-07
jQuery循環(huán)遍歷子節(jié)點(diǎn)并獲取值的方法
這篇文章主要介紹了jQuery循環(huán)遍歷子節(jié)點(diǎn)并獲取值的方法,涉及jQuery節(jié)點(diǎn)的遍歷與屬性操作相關(guān)技巧,需要的朋友可以參考下
2016-04-04
使用js顯示當(dāng)前時(shí)間示例
這篇文章主要介紹了使用js顯示當(dāng)前時(shí)間示例,這里也用到了jquery，讓得把它也要引入到頁(yè)面中
2014-03-03
jquery實(shí)現(xiàn)兩個(gè)圖片漸變切換效果的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)兩個(gè)圖片漸變切換效果的方法,涉及jquery針對(duì)圖片的顯示與隱藏效果的實(shí)現(xiàn)技巧,需要的朋友可以參考下
2015-06-06
JQuery中DOM事件冒泡實(shí)例分析
這篇文章主要介紹了JQuery中DOM事件冒泡用法,實(shí)例分析了事件冒泡的原理與阻止冒泡的方法,需要的朋友可以參考下
2015-06-06
JQuery統(tǒng)計(jì)input和textarea文字輸入數(shù)量(代碼分享)
本文主要介紹了jQuery實(shí)現(xiàn)統(tǒng)計(jì)輸入文字個(gè)數(shù)的方法，具有一定的參考價(jià)值，需要的朋友一起來(lái)看下吧
2016-12-12
jQuery操作表格（table）的常用方法、技巧匯總
雖然現(xiàn)在DIV+CSS進(jìn)行頁(yè)的布局大行其道，但是很多地方使用table還是有很多優(yōu)勢(shì)，用table展示數(shù)據(jù)是比較方便的，下面匯總了jQuery操作Table tr td常用的方法，熟記這些操作技巧，下次再使用的到時(shí)候，會(huì)讓你如魚(yú)得水，提高開(kāi)發(fā)效率
2014-04-04