我们经常使用到弹出层。对于弹出层，原本的意义就是增加与用户的交互，提升用户的好感度。我们在使用的时候需要注意几个弹出层的注意点：
弹出层的界面需要统一，不一致的弹出层并不能增加美感，相反还会显得页面布局更加杂乱无章；
弹出层的设计一定要好看，按钮要符合项目的主色调；
弹出层的宽度固定屏幕占比，设置max-width，高度根据内容自适应；
点击其他区域能隐藏弹出层。
今天，主要说说点击其他区域隐藏弹出层 什么是事件冒泡？为什么要使用它？
事件冒泡：由最具体的元素接收（当前节点），然后逐级向上传播至最不具体的元素的节点（document）；
在实现点击其他区域隐藏弹出层时，需要对document绑定点击事件，而事件冒泡会使点击其它节点时仍然触发该事件，从而造成事件冲突，导致该显示弹出层时显示不出，不该隐藏时却又隐藏了弹出层。。余斗被这个效果折磨了很久，皆是因为对事件冒泡的理解不够已经错误处理。
说明：
$(document)即给整个文档绑定点击事件，点击则隐藏弹出层container；
$(“button”)给按钮绑定点击事件，点击即显示弹出层container；
此处必须加event.stopPropagation()阻止冒泡，否则先执行button的事件显示弹出层container，又向上冒泡执行document事件隐藏弹出层container，导致最终点击没有效果；
$(“.layer-main”)给弹出层main绑定点击事件，点击它或冒泡到它时，即阻止继续冒泡到document；
此处的点击事件以及阻止冒泡必须加，否则点击弹出层main或里面的其他节点，都会冒泡到document，从而隐藏弹出层container，导致事件紊乱。
其实，还可以通过事件的目标（event.target）来识别当前点击的节点，从而进行接下来的操作，比如对指定的节点的特殊操作
==>>除指定区域外点击任何区域都隐藏div：
$('body').click(function(e) {
var target = $(e.target);
// 如果#layer或者#btn下面还有子元素，可使用
// !target.is('#btn *') && !target.is('#layer *')
if(!target.is('#btn') && !target.is('#layer')) {
if ( $('#layer').is(':visible') ) {
$('#layer').hide();
}
}
});
$('body').click(function(e) {
if(e.target.id != 'btn' && e.target.id != 'overlay')
if ( $('#layer').is(':visible') ) {
$('#layer').hide();
}
})
