快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线: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://6mz.cn/article/cepcjd.html