我们在前端功能开发的时候经常会碰到点击按钮弹出元素,点击任意空白处时隐藏已弹出的元素,本文主要介绍如何通过Jquery来实现这个特效功能的方法。
一款jQuery点击空白处隐藏弹出层网页特效,点击按钮弹出层、点击页面空白处隐藏弹出层代码,主要是通过$(document).click方法来操作,具体实现代码如下:
html代码:
<div class="btn">按钮</div> <div id="box">弹出层</div>
js代码:
$('.btn').click(function (event) { event.stopPropagation(); $('#box').toggle(); return false; }); //点击任意空白隐藏box $(document).click(function(event){ var _con = $('#box'); if(!_con.is(event.target) && _con.has(event.target).length === 0){ $('#box').hide(); } });