一款jQuery点击空白处隐藏弹出层网页特效，点击按钮弹出层、点击页面空白处弹出层消失JS代码。主要功能是点击按钮弹出层显示,然后通过点击页面任意位置都能关闭弹出层显示效果,主要是$(document).click的操作应用。演示
Demo
,效果源码：
CSS代码:
padding
:
0
;
margin
:
0
;
#btnShow
{
margin
:
100px auto 0
;
width
:
90px
;
display
:
block
;
#divTop
{
border
:
2px solid #666666
;
position
:
absolute
;
display
:
none
;
width
:
400px
;
height
:
200px
;
color
:
#333
;
background
:
#efefef
;
padding-top
:
10px
;
text-align
:
center
;
font
:
16px/30px
"微软雅黑"
;
margin-top
:
-105px
;
margin-left
:
-200px
;
left
:
50%
;
top
:
50%
;
JS代码：
$(function () {
$('#btnShow').click(function (event) {
event.stopPropagation();
$('#divTop').toggle('slow');
return false;
});
$(document).click(function(event){
var _con = $('#divTop');
if(!_con.is(event.target) && _con.has(event.target).length === 0){
$('#divTop').hide(1000);
});
HTML代码：
<input type="button" id="btnShow" value="弹出框按钮" />
<div id="divTop">
点击空白区域弹出层关闭！
</div>
</body>
经过测试，在移动端Iphone手机上点击页面空白处弹出层关闭失效，不支持document写法，解决方案：可以添加一个背景层作为页面空白对象处理。
点击空白处隐藏弹出层案例二：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>点击空白处关闭弹出层</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#box{width:300px;height:200px;border:1px solid #000;display:none;}
.btn{color:red;}
</style>
<script type="text/javascript" src="http://www.internetke.com/public/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".btn").click(function(event){
var e=window.event || event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
$("#box").show();
});
$("#box").click(function(event){
var e=window.event || event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
});
document.onclick = function(){
$("#box").hide();
</script>
</head>
<div id="box"></div>
<span class="btn">点击此处打开弹出层</span><br>点击空白处关闭弹出层
</body>
</html>
一款jQuery点击空白处隐藏弹出层网页特效，点击按钮弹出层、点击页面空白处弹出层消失JS代码。主要功能是点击按钮弹出层显示,然后通过点击页面任意位置都能关闭弹出层显示效果,主要是$(document).click的操作应用。演示 Demo,效果源码：
CSS代码:
padding: 0;
margin: 0;
#btnShow{
margin:
场景：
点击一个按钮弹出一个对话框/气泡，
点击空白区域
隐藏对话框/气泡；html:<button id="btn">按钮</button>
<div class="tips"></div>css:.tips{
width: 100px;
height: 100px;
background: red;
display: none;
}js://方法一：适用于按钮(有聚焦、失焦事件)
// 取消事件冒泡
event.stopPropagation();
// 按钮的
toggle,如果div是可见的,
点击按钮切换为
隐藏的;如果是
隐藏的,切换为可见的。
$('#divTop').
toggle('slow');
retur
1.e.target!=clickTarget&&$(e.target).closest(".aside-navbar").length==0
思路：1.判断当前点击的对象是不是那个你想要的点击对象；
2.利用jquery closet（获取第一个相匹配的祖先元素，注意：起始点包括自身元素）判断当前点击的对象是否有这个“.aside-navbar”
这个祖先，包括自身
$(document).live('click',function(){ $('.emails').hide(); });
此代码为点击空白处，'emails'，标签隐藏。
转载于:https://www.cnblogs.com/isungge/p/4667271.html...
您好，这是一个关于网页开发技术的问题。您可以通过使用jQuery的事件监听函数和条件判断语句来实现点击指定元素外隐藏div。具体实现方式可以参考下面的代码示例：
// 监听document的click事件
$(document).click(function(e) {
// 如果点击的元素不是指定元素或指定元素的后代元素，则隐藏div
if (!$(e.target).is('#指定元素id') && !$('#指定元素id').has(e.target).length) {
$('#要隐藏的div的id').hide();
// 点击指定元素时，显示或隐藏div
$('#指定元素id').click(function() {
$('#要隐藏的div的id').toggle();
希望这个回答可以帮到您，如果您有任何其他问题，欢迎继续提问。
