资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

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://cdkjz.cn/article/cepcjd.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
成都画册设计企业网站建设自适应网站建设B2C电商系统成都网站建设微信小程序公众号开发成都广告公司成都网站建设泸州网站建设成发金汇

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图