189 8069 5689

jQuery如何实现点击自身以外区域关闭弹出层功能-创新互联

小编给大家分享一下jQuery如何实现点击自身以外区域关闭弹出层功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联是一家集网站建设,长白企业网站建设,长白品牌网站建设,网站定制,长白网站建设报价,网络营销,网络优化,长白网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

本文实例讲述了jQuery实现点击自身以外区域关闭弹出层功能，具体如下：





www.jb51.net jQuery点击关闭弹出层

click

show-area

$(document).ready(function() { $("div.down").click(function(e) { e.stopPropagation(); $("div.con").removeClass("hide"); $("div.area").removeClass("hide"); }); $(".area").click(function() { if (!$("div.con").hasClass("hide")) { $("div.con").addClass("hide"); $("div.area").addClass("hide"); } }); });

运行该代码后，点击页面上的click可弹出一个弹出层，再点击弹出层外的空白区域即可关闭弹出层。

使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试运行效果如下：

jQuery如何实现点击自身以外区域关闭弹出层功能

jquery是什么

jquery是一个简洁而快速的JavaScript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、Ajax交互和动画，以便快速开发网站。

以上是“jQuery如何实现点击自身以外区域关闭弹出层功能”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

分享标题：jQuery如何实现点击自身以外区域关闭弹出层功能-创新互联
网站地址：http://cdxtjz.cn/article/cepcjd.html

其他资讯