JS点击空白区域时关闭弹出层

写代码的时候经常会碰到点击某个按钮弹出一个框，点击除了按钮的其他部分时隐藏框，隐藏框的时候可能什么都不用做，可能要做一些什么。下面拿两个例子分别来说。

 

一、登录框。没登陆之前，点击需要登录才能用的应用时，一点击就会弹出层登陆框让登陆，若不登录点击登陆框之外的区域登录框消失。

这种情况有一个很大的特点：点击空白区域时除了隐藏登陆框别的什么都不用做，此时可以考虑使用遮罩层。

因为：遮罩层覆盖整个页面，只有登录框浮在上面。点击登录框区域时点不到遮罩层，点登陆框之外的区域全部都是遮罩层，这样子检测起来也比较简单。

这里写个简单的伪代码吧：

遮罩层代码：

<div id="zhegai" style="display:none;width:100%;height: 100%;top:0px;left:0px;position:absolute;filter:Alpha(Opacity=0);z-index:1000;background:#aaa;-moz-opacity: 0;opacity:0;"></div>

登陆框代码：

<div id="container" style="margin: 0px auto;top:30%;left: 30%;width: 688px;position: absolute;z-index:2000;display:none;">....</div>

有两个注意点：

1、为了视觉效果，我这里的遮罩层是完全透明的，登陆框弹出来时看起来只有一个登录框。

2、登陆框所在div的z-index值一定要比遮罩层所在div的z-index大，这样子登陆框才能浮在遮罩层之上，否则就在之下了。

JS代码：

$('.sinput').click(function(){
	var $zhegai = $("#zhegai");
	$zhegai.show();//遮罩层显示出来
	$("#container").show();//登陆框显示
	//点击遮罩层的时候（因为登陆框浮在遮罩层之上，所以点击登录框时点击不到遮罩层）
	$zhegai.bind("click",function(){
		$("#container").hide();//登陆框隐藏
		$(this).hide();//隐藏遮罩层
	});
});

 

二、软键盘。今天写了一个这样子的例子：用JS自定义一个软键盘，点击“查询”按钮所对应的文本框和需要填写数字的文本框时调出软键盘，点击其他空白区域时隐藏软键盘。

这个例子的特点：隐藏软键盘之后还需要干点别的，譬如我用软键盘输入完了点击一下查询按钮此时就需要隐藏软键盘和执行查询操作，譬如输入数字之后自动校验输入的数字是否符合要求。

为什么不适用遮罩层呢？是因为：需要点两下，感觉上不好。按照常理，我输完数据之后直接点击查询按钮进行查询，若是使用遮罩层你点的这一下只是点在遮罩层上根本不会触发查询事件，要想查询就还得再点一下，这样子算下来我查个数据还得点两下，内行的人知道是怎么回事外行的就得说这东西做的太垃圾了。

解决办法：检测整个document，每次点击的时候查看一下是否点击了查询文本框、数字文本框、软键盘所在div，若都不是且软键盘处于显示状态，就隐藏。

处理代码如下：

$(document).bind("click",function(e){
	var $target  = $(e.target);
	//alert("点击查询框："+$target.is("#querySuppliername")+"\n点击了软键盘："+$target.is("#keyboard>li")+"\n点击了数字框："+$target.is(".num"));
	if(!$target.is("#keyboard>li") && !$target.is("#querySuppliername") 
	&& !$target.is(".num") && $("#container").is(":visible")){
		$("#container").hide();
	}
	e.stopPropagation();
});