點(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>
復(fù)制代碼 代碼如下:
<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>
您可能感興趣的文章:
- 基于jQuery實(shí)現(xiàn)點(diǎn)擊彈出層實(shí)例代碼
- jquery實(shí)現(xiàn)點(diǎn)擊彈出帶標(biāo)題欄的彈出層(從右上角飛入)效果
- jquery原創(chuàng)彈出層折疊效果點(diǎn)擊折疊彈出一個(gè)層
- jquery實(shí)現(xiàn)點(diǎn)擊彈出層效果的簡(jiǎn)單實(shí)例
- Jquery利用mouseenter和mouseleave實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)彈出層且可以點(diǎn)擊
- 點(diǎn)擊彈出層效果&彈出窗口后網(wǎng)頁(yè)背景變暗效果的實(shí)現(xiàn)代碼
- jQuery點(diǎn)擊自身以外地方關(guān)閉彈出層的簡(jiǎn)單實(shí)例
- js 點(diǎn)擊頁(yè)面其他地方關(guān)閉彈出層(示例代碼)
- JavaScript 點(diǎn)擊頁(yè)面上的按紐,彈出層,背景變灰
- js點(diǎn)擊任意區(qū)域彈出層消失實(shí)現(xiàn)代碼
相關(guān)文章
jQuery+css實(shí)現(xiàn)的時(shí)鐘效果(兼容各瀏覽器)
這篇文章主要介紹了jQuery+css實(shí)現(xiàn)的時(shí)鐘效果,使用js的setTimeout方法實(shí)時(shí)修改頁(yè)面元素,實(shí)現(xiàn)動(dòng)態(tài)顯示時(shí)鐘的功能.該代碼可兼容各瀏覽器,需要的朋友可以參考下2016-01-01jQuery實(shí)現(xiàn)移動(dòng) 和 漸變特效的點(diǎn)擊事件
這里給大家分享的是一則使用jQuery實(shí)現(xiàn)移動(dòng)和漸變特效的點(diǎn)擊事件效果,非常簡(jiǎn)單實(shí)用,這里推薦給大家。2015-02-02詳解有關(guān)easyUI的拖動(dòng)操作中droppable,draggable用法例子
本篇文章主要介紹了有關(guān)easyUI的拖動(dòng)操作中droppable,draggable用法例子,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法總結(jié)
本文是對(duì)Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用進(jìn)行了詳細(xì)的總結(jié)介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11深入解析jQuery中Deferred的deferred.promise()方法
這篇文章主要介紹了jQuery中Deferred的deferred.promise()方法,提醒千萬(wàn)要注意deferred.promise()與jQuery的.promise() 實(shí)例方法的區(qū)別,需要的朋友可以參考下2016-05-05jQuery實(shí)現(xiàn)div拖拽效果實(shí)例分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)div拖拽效果的方法,結(jié)合實(shí)例形式分析了jQuery響應(yīng)鼠標(biāo)事件實(shí)現(xiàn)頁(yè)面元素樣式變換的技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-02-02jQuery Ajax 全局調(diào)用封裝實(shí)例代碼詳解
這篇文章主要介紹了jQuery Ajax 全局調(diào)用封裝實(shí)例代碼詳解的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06