点击弹出层外区域关闭弹出层jquery特效示例
更新时间：2013年08月25日 13:06:23 作者：
击弹出层 ，点击弹出层外区域关闭弹出层，点击关闭关闭弹出层jquery特效，具体代码如下，喜欢的朋友可以学习下
点击弹出层外区域关闭弹出层jquery特效,废话不说，上代码，简洁明了：
<html>
<head>
<style>
.hide{display:none;}
.con{width:500px;height:300px;background:#000;}
</style>
<title>点击弹出层 ，点击弹出层外区域关闭弹出层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;">关闭</a>
</div>
</body>
</html>
复制代码 代码如下:
<html>
<head>
<style>
.hide{display:none;}
.con{width:500px;height:300px;background:#000;}
</style>
<title>点击弹出层 ，点击弹出层外区域关闭弹出层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;">关闭</a>
</div>
</body>
</html>
相关文章
该系列文章是我阅读<jQuery Plugin Development Beginner's Guide>后的总结，有兴趣的朋友可以去读原版的书籍2012-08-08
这篇文章主要为大家详细介绍了jQuery插件开发的相关资料,需要的朋友可以参考下2016-05-05
这篇文章主要介绍了jQuery+css实现的时钟效果,使用js的setTimeout方法实时修改页面元素,实现动态显示时钟的功能.该代码可兼容各浏览器,需要的朋友可以参考下2016-01-01
这里给大家分享的是一则使用jQuery实现移动和渐变特效的点击事件效果，非常简单实用，这里推荐给大家。2015-02-02
详解有关easyUI的拖动操作中droppable，draggable用法例子
本篇文章主要介绍了有关easyUI的拖动操作中droppable，draggable用法例子，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
本文是对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
深入解析jQuery中Deferred的deferred.promise()方法
这篇文章主要介绍了jQuery中Deferred的deferred.promise()方法,提醒千万要注意deferred.promise()与jQuery的.promise() 实例方法的区别,需要的朋友可以参考下2016-05-05
这篇文章主要介绍了jQuery实现div拖拽效果的方法,结合实例形式分析了jQuery响应鼠标事件实现页面元素样式变换的技巧与相关注意事项,需要的朋友可以参考下2016-02-02
这篇文章主要记录了在近期开发中遇到的jQuery dom基本查找方法，然后将各种方法性能做了一个比较，目的是希望自己在以后dom元素查找时，使用最优的方案。文中介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。2017-05-05
这篇文章主要介绍了jQuery Ajax 全局调用封装实例代码详解的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-06-06
最新评论