jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】

本文实例讲述了框架实现点击自身以外区域关闭弹出层功能。分享给大家供大家参考，具体如下：

原理参考前面一篇《JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能》 ,小编顺便对原文区域外点击病菌进行了修改，具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title www .JB 51。net Jquery点击关闭弹出层/title样式。面积{宽度：100%；高度：100%;位置：固定；z索引：1;}.隐藏{ display:none}。con { width:400px高度：200 px背景-颜色： # F6F4F 0；位置：固定；z索引：2;}/style/head dydiv class=' area hide '/div class=' down ' click/div class=' con hide ' show-area/div script src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js '/script脚本类型=' text/JavaScript ' $(文档)。ready(function() { $('div.down ')).click(function(e){ e . stopperpagation()；$('div.con ').removeClass("隐藏");$('div.area ').removeClass("隐藏");});$('.区域')。单击(function() { if(！$('div.con ').有类(' hide '){ $(' div。con ').添加CLaSS(' hide ')；$('div.area ').添加CLaSS(' hide ')；} });});/脚本/正文/html运行该代码后，点击页面上的点击可弹出一个弹出层，再点击弹出层外的空白区域即可关闭弹出层。

使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试运行效果如下：

更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery窗口操作技巧总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 及《jquery选择器用法总结》

希望本文所述对大家框架程序设计有所帮助。