點擊彈出層外區(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 Plugin Development Beginner's Guide>后的總結(jié)，有興趣的朋友可以去讀原版的書籍2012-08-08
這篇文章主要為大家詳細(xì)介紹了jQuery插件開發(fā)的相關(guān)資料,需要的朋友可以參考下2016-05-05
jQuery+css實現(xiàn)的時鐘效果(兼容各瀏覽器)
這篇文章主要介紹了jQuery+css實現(xiàn)的時鐘效果,使用js的setTimeout方法實時修改頁面元素,實現(xiàn)動態(tài)顯示時鐘的功能.該代碼可兼容各瀏覽器,需要的朋友可以參考下2016-01-01
這里給大家分享的是一則使用jQuery實現(xiàn)移動和漸變特效的點擊事件效果，非常簡單實用，這里推薦給大家。2015-02-02
詳解有關(guān)easyUI的拖動操作中droppable，draggable用法例子
本篇文章主要介紹了有關(guān)easyUI的拖動操作中droppable，draggable用法例子，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法總結(jié)
本文是對Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
深入解析jQuery中Deferred的deferred.promise()方法
這篇文章主要介紹了jQuery中Deferred的deferred.promise()方法,提醒千萬要注意deferred.promise()與jQuery的.promise() 實例方法的區(qū)別,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了jQuery實現(xiàn)div拖拽效果的方法,結(jié)合實例形式分析了jQuery響應(yīng)鼠標(biāo)事件實現(xiàn)頁面元素樣式變換的技巧與相關(guān)注意事項,需要的朋友可以參考下2016-02-02
這篇文章主要記錄了在近期開發(fā)中遇到的jQuery dom基本查找方法，然后將各種方法性能做了一個比較，目的是希望自己在以后dom元素查找時，使用最優(yōu)的方案。文中介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-05-05
jQuery Ajax 全局調(diào)用封裝實例代碼詳解
這篇文章主要介紹了jQuery Ajax 全局調(diào)用封裝實例代碼詳解的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06