Js实现点击特定区域显示对应隐藏层，点击文档其他地方关闭所有弹出层

 

 1     $(function (event) {
 2         //点击id属性值为clt的对象，显示对应隐藏层
 3         $("#clt").click(function (event) {
 4             var e = window.event || event;
 5             if (e.stopPropagation) {
 6                 e.stopPropagation();
 7             } else {
 8                 e.cancelBubble = true;
 9             }
10             $("#msg").show();
11         });
12 
13         //点击文档空白处，隐藏所有弹出层
14         $("#msg").click(function (event) {
15             var e = window.event || event;
16             if (e.stopPropagation) {
17                 e.stopPropagation();
18             } else {
19                 e.cancelBubble = true;
20             }
21         });
22         document.onclick = function () {
23             $("#msg").hide();
24             $("#login").hide();
25         };
26     })
27 
28     $(function () {
29         //点击id属性值为loginClick的对象，显示对应隐藏层
30         $("#loginClick").click(function (event) {
31             var e = window.event || event;
32             if (e.stopPropagation) {
33                 e.stopPropagation();
34             } else {
35                 e.cancelBubble = true;
36             }
37             $("#login").show();
38         });
39 
40         //点击文档空白处，隐藏所有弹出层
41         $("#login").click(function (event) {
42             var e = window.event || event;
43             if (e.stopPropagation) {
44                 e.stopPropagation();
45             } else {
46                 e.cancelBubble = true;
47             }
48         });
49         document.onclick = function () {
50             $("#msg").hide();
51             $("#login").hide();
52         };
53     })

页面中存在两个隐藏层，其id属性值分别是msg和login，以上程序可以实现在分别点击id属性值为ctl的对象时显示#msg对象，点击id属性值为loginClick的对象时显示#login对象，点击文档空白处时同时隐藏所有弹出层