Tel：028-86922220 我有需求

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://bzwzjz.com/article/cepcjd.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接： 成都响应式网站建设公司 手机网站设计 成都网站设计 营销型网站建设 成都h5网站建设 手机网站制作设计 宜宾网站设计 成都网站设计 成都模版网站建设 手机网站制作 手机网站制作 成都网站建设公司 重庆网站建设 成都网站设计 企业网站制作 成都响应式网站建设 广安网站设计 成都网站制作 成都定制网站建设 成都商城网站建设 高端网站设计 泸州网站建设 

    • 微信扫一扫在线咨询