jquery如何实现点击空白处隐藏元素

前端之家收集整理的这篇文章主要介绍了jquery如何实现点击空白处隐藏元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我们在网站开发的时候经常会有点击空白处去隐藏已有的元素,DIV或者其他,本次教给大家如何用jquery实现这个特效的方法

一款jQuery点击空白处隐藏弹出层网页特效,点击按钮弹出层、点击页面空白处弹出层消失JS代码。主要功能是点击按钮弹出层显示,然后通过点击页面任意位置都能关闭弹出层显示效果,主要是$(document).click的操作应用。演示 Demo,效果源码:

CSS代码:

JS代码

效果和淡出消失效果。 $(document).click(function(event){ var _con = $('#divTop'); // 设置目标区域 if(!_con.is(event.target) && _con.has(event.target).length === 0){ // Mark 1 //$('#divTop').slideUp('slow'); //滑动消失 $('#divTop').hide(1000); //淡出消失 } }); })

HTML代码

关闭!

经过测试,在移动端Iphone手机上点击页面空白处弹出层关闭失效,不支持document写法,解决方案:可以添加一个背景层作为页面空白对象处理。

点击空白处隐藏弹出层案例二:

点击空白处<a href="https://www.jb51.cc/tag/guanbi/" target="_blank" class="keywords">关闭</a>弹出层
Box">

点击空白处关闭弹出层

在给大家分享一下js实现的点击div区域外隐藏div区域的方法代码