點擊彈出層外區(qū)域關(guān)閉彈出層jquery特效示例
更新時間：2013年08月25日 13:06:23 作者：
擊彈出層 ，點擊彈出層外區(qū)域關(guān)閉彈出層，點擊關(guān)閉關(guān)閉彈出層jquery特效，具體代碼如下，喜歡的朋友可以學(xué)習(xí)下
點擊彈出層外區(qū)域關(guān)閉彈出層jquery特效,廢話不說，上代碼，簡潔明了：
<html>
<head>
<style>
.hide{display:none;}
.con{width:500px;height:300px;background:#000;}
</style>
<title>點擊彈出層 ，點擊彈出層外區(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>
復(fù)制代碼 代碼如下:
<html>
<head>
<style>
.hide{display:none;}
.con{width:500px;height:300px;background:#000;}
</style>
<title>點擊彈出層 ，點擊彈出層外區(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>
您可能感興趣的文章:
- 基于jQuery實現(xiàn)點擊彈出層實例代碼
- jquery實現(xiàn)點擊彈出帶標(biāo)題欄的彈出層(從右上角飛入)效果
- jquery原創(chuàng)彈出層折疊效果點擊折疊彈出一個層
- jquery實現(xiàn)點擊彈出層效果的簡單實例
- Jquery利用mouseenter和mouseleave實現(xiàn)鼠標(biāo)經(jīng)過彈出層且可以點擊
- 點擊彈出層效果&彈出窗口后網(wǎng)頁背景變暗效果的實現(xiàn)代碼
- jQuery點擊自身以外地方關(guān)閉彈出層的簡單實例
- js 點擊頁面其他地方關(guān)閉彈出層(示例代碼)
- JavaScript 點擊頁面上的按紐，彈出層，背景變灰
- js點擊任意區(qū)域彈出層消失實現(xiàn)代碼
相關(guān)文章
JQuery 在文檔中查找指定name的元素并移除的實現(xiàn)方法
下面小編就為大家?guī)硪黄狫Query 在文檔中查找指定name的元素并移除的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
在項目中，我們經(jīng)常要遇到上傳圖片，這就需要我們必須要驗證圖片的格式與大小，那么如何來操作呢，今天就給大家分享一個非常簡單的jQuery驗證上傳圖片的格式與大小的代碼。2014-12-12
本文給大家分享的是個人關(guān)于jQuery中事件的理解，主要向大家介紹了jQuery中事件的綁定，合成、以及事件冒泡、阻止事件等內(nèi)容，希望大家能夠喜歡。2015-03-03
Easyui Datagrid自定義按鈕列(最后面的操作列)
做項目的時候因為需求,要在表格的最后添加一列操作列,easyUI貌似沒有提供這種功能，下面我們來自定義按鈕列，具體實現(xiàn)代碼，大家參考下本文吧2017-07-07
jQuery循環(huán)遍歷子節(jié)點并獲取值的方法
這篇文章主要介紹了jQuery循環(huán)遍歷子節(jié)點并獲取值的方法,涉及jQuery節(jié)點的遍歷與屬性操作相關(guān)技巧,需要的朋友可以參考下2016-04-04
這篇文章主要介紹了使用js顯示當(dāng)前時間示例,這里也用到了jquery，讓得把它也要引入到頁面中2014-03-03
這篇文章主要介紹了jquery實現(xiàn)兩個圖片漸變切換效果的方法,涉及jquery針對圖片的顯示與隱藏效果的實現(xiàn)技巧,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了JQuery中DOM事件冒泡用法,實例分析了事件冒泡的原理與阻止冒泡的方法,需要的朋友可以參考下2015-06-06
JQuery統(tǒng)計input和textarea文字輸入數(shù)量(代碼分享)
本文主要介紹了jQuery實現(xiàn)統(tǒng)計輸入文字個數(shù)的方法，具有一定的參考價值，需要的朋友一起來看下吧2016-12-12
雖然現(xiàn)在DIV+CSS進(jìn)行頁的布局大行其道，但是很多地方使用table還是有很多優(yōu)勢，用table展示數(shù)據(jù)是比較方便的，下面匯總了jQuery操作Table tr td常用的方法，熟記這些操作技巧，下次再使用的到時候，會讓你如魚得水，提高開發(fā)效率2014-04-04