asp.net 弹出div层

这是一项老技术了，但这几天在一个需要特殊于用户交互的地方用了一下，感觉不错，在这里和大家分享一下。

 

这项技术可以应用在，与用户进行的简单的需要用户输入的交互需求中。

 

1 、实现（客户端）：即asp.net 网页的源中

1）CSS样式：

1. body
2. {
3.     margin: 15px auto;
4.     padding: 0px;
5.     background-color: #c3daf9;
6.     text-align: center;
7. }
10. #header 
11. {
12.     border: solid 1px #000;
13.     padding: 10px;
14.     margin: 0px;
15.     width: 700px;
16.     position: relative; 
17.     height: 20px;
18.     text-align: center;
19. }
20. #header P 
21. {
22.     padding: 0px;
23.     font-weight: bold;
24.     font-size: 24px;
25.     margin: 0px;
26.     color: #2557ad;
27. }
29. #content 
30. {
31.     border: solid 1px #000;
32.     margin: 0px;
33.     padding: 10px;
34.     padding-top: 30px;
35.     width: 700px;
36.     height: 300px;
37.     position: relative;
38.     background-color: #fff;
39.     text-align: left;
40. }
42. .popupWindow
43. {
44.     position:absolute;
45.     width:250px;
46.     border: solid 1px black;
47.     margin: 0px 0px 0px 20px;
48.     background-color:white;
49.     filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color=#2557ad); 
50.     display:none;
51. }
53. label
54. {
55.     font-size: 14px;
56.     font-weight: bold;
57.     padding: 5px 5px 10px 15px;
58. }
59. input
60. {
61.     border: solid 1px #000;
62. }

2）定义弹出方法（js）:

1. var jsAreaShowTime = 1000;
2. var JsAreas = new Object();
4. function GetArea(id)
5. {
6.     return JsAreas[id] ? JsAreas[id] : (JsAreas[id] = new JsArea(id));
7. }
9. // A single popup window
10. function JsArea(id)
11. {
12.     this.AreaId = id;
13. }
15. // Function to return the DIV Layer
16. JsArea.prototype.ContentArea= function()
17. {
18.     var divArea = document.getElementById(this.AreaId);
19.     if (divArea != null)
20.     {
21.         return divArea;
22.     }
23.     return null;
24. }
26. var activeAreaId = null;
28. // Function to show the DIV Layer
29. JsArea.prototype.popareaup = function(x, y)
30. {
31. if (activeAreaId != null)   
32.     jsAreaClose(activeAreaId);
33.     
34.     var divLayer = this.ContentArea();
35.     divLayer.style.position = 'absolute';
36.     divLayer.style.display = 'block';
37.     divLayer.style.left = x;
38.     divLayer.style.top = y;
39.     divLayer.οnmοuseοver= JsAreaMouseOver;
40.     divLayer.onmouseout = jsAreaMouseOut;
41.     activeAreaId = this.AreaId;
42.     
43.     return false;
44. }
46. // Function to hide the DIV Layer
47. JsArea.prototype.hide = function()
48. {
49.     var divLayer = this.ContentArea();
50.     if (divLayer != null)
51.         divLayer.style.display = 'none';
52.         
53.     return false;
54. }
56. // Function to be called
57. // by Web forms to show the Popup Window
58. function PopupArea(e, areaId)
59. {
60.     if (e.pageX || e.pageY)
61.     {
62.         posx = e.pageX;
63.         posy = e.pageY;
64.     }
65.     else 
66.     if (e.clientX || e.clientY)
67.     {
68.         posx = e.clientX + document.body.scrollLeft;
69.         posy = e.clientY + document.body.scrollTop;
70.     }
71.     var area = GetArea(areaId);
72.     area.popareaup(posx, posy);
73. }
75. // Function to hide the DIV Layer
76. function jsAreaClose(areaId)
77. {
78.     GetArea(areaId).hide();
79.     activeAreaId = divHangTimer = null; 
80. }
82. var divHangTimer = null;
84. // Function to keep the Div Layer
85. // showing for a "period" of time
86. // after that period, if the mouse
87. // has been outside the DIV Layer, 
88. // it will be hidden automatically
89. function KeepArea(areaId)
90. {
91.     if (areaId == activeAreaId && divHangTimer != null)
92.     {
93.         clearTimeout(divHangTimer);
94.         divHangTimer = null;
95.     }
96. }
98. // Function to release the DIV Layer
99. function RelArea(areaId)
100. {
101.     if (areaId == activeAreaId && divHangTimer == null)
102.         divHangTimer = setTimeout('jsAreaClose(/'' + areaId + '/')', jsAreaShowTime);
103. }
105. // Function fired when mouse is over the 
106. // DIV Layer, used to keep the layer showing
107. function JsAreaMouseOver(e)
108. {
109.     if (!e) 
110.         var e = window.event;
111.     var targ = e.target ? e.target : e.srcElement;
112.     KeepArea(activeAreaId);
113. }
115. // Function that fires when mouse is out of
116. // the scope of the DIV Layer
117. function jsAreaMouseOut(e)
118. {
119.     if (!e) 
120.         var e = window.event;
121.     var targ = e.relatedTarget ? e.relatedTarget : e.toElement;
122.     var activeAreaView = document.getElementById(activeAreaId);
123.     if (activeAreaView != null && !jsAreaContains(activeAreaView, targ))
124.         RelArea(activeAreaId);
125. }
126. function jsAreaContains(parent, child)
127. {
128.     while(child)
129.         if (parent == child) return true;
130.         else 
131.             child = child.parentNode;
132.         
133.         return false;
134. }

 

3）调用实现：将 css,js脚本 生成相应文件 名称分别为 CSS.css 和js.js

1. <!--head 区域内-->
2. <LINK href="css.css" type="text/css" rel="stylesheet">
3. <script src="js.js" type="text/javascript"></script>
4. <script language="javascript">
5.             <!--
6.                                 function ProtectBox(e) 
7.     {
8.        return false;
9.     }
10.             //-->
11.             </script>
14. <!--body区域内->
15. <!--注：最好用客户端控件-->
16. <input id="Button1" type="button" value="button" OnKeyDown="return ProtectBox(event);" OnClick="PopupArea(event, 'divCountry')"/>
17. <!--弹出的div -->
18. <div class="popupWindow" id="divCountry">
19.                 <table cellSpacing="0" cellPadding="0" width="250px" bgColor="#2557ad" border="0">
20.                     <tr>
21.                         <td align="right"><span style="CURSOR: hand" onclick="jsAreaClose('divCountry')"><img alt="Hide Popup" src="../../FormStyle/images/close.gif" border="0"></span></td>
22.                     </tr>
23.                     <tr>
24.                         <td>
25.                             <asp:Label ID="Label1" runat="server" valign="top" Text="驳回原因"></asp:Label>
26.                             
27.                             
28.                         </td>
29.                     </tr>
30.                     <tr>
31.                         <td>
32.                             
33.                             <asp:TextBox ID="TextBox2" runat="server" Height="83px" TextMode="MultiLine"></asp:TextBox>
34.                             
35.                             
36.                         </td>
37.                     </tr>
38.                     <tr>
39.                         <td>
40.                           
41.                             <asp:Button ID="Button3" runat="server" CssClass="btn1"  Text="确定" OnClick="Button1_Click" />
42.                             
43.                         </td>
44.                     </tr>
45.                 </table>
46.             </div>

2、服务器端：即CS代码

 

1. override protected void OnInit(EventArgs e)
2.         {
3.            base.OnInit(e);
4.         }

填入这段代码即可