这是一项老技术了,但这几天在一个需要特殊于用户交互的地方用了一下,感觉不错,在这里和大家分享一下。
这项技术可以应用在,与用户进行的简单的需要用户输入的交互需求中。
1 、实现(客户端):即asp.net 网页的源中
1)CSS样式:
- body
- {
- margin: 15px auto;
- padding: 0px;
- background-color: #c3daf9;
- text-align: center;
- }
- #header
- {
- border: solid 1px #000;
- padding: 10px;
- margin: 0px;
- width: 700px;
- position: relative;
- height: 20px;
- text-align: center;
- }
- #header P
- {
- padding: 0px;
- font-weight: bold;
- font-size: 24px;
- margin: 0px;
- color: #2557ad;
- }
- #content
- {
- border: solid 1px #000;
- margin: 0px;
- padding: 10px;
- padding-top: 30px;
- width: 700px;
- height: 300px;
- position: relative;
- background-color: #fff;
- text-align: left;
- }
- .popupWindow
- {
- position:absolute;
- width:250px;
- border: solid 1px black;
- margin: 0px 0px 0px 20px;
- background-color:white;
- filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color=#2557ad);
- display:none;
- }
- label
- {
- font-size: 14px;
- font-weight: bold;
- padding: 5px 5px 10px 15px;
- }
- input
- {
- border: solid 1px #000;
- }
2)定义弹出方法(js):
- var jsAreaShowTime = 1000;
- var JsAreas = new Object();
- function GetArea(id)
- {
- return JsAreas[id] ? JsAreas[id] : (JsAreas[id] = new JsArea(id));
- }
- // A single popup window
- function JsArea(id)
- {
- this.AreaId = id;
- }
- // Function to return the DIV Layer
- JsArea.prototype.ContentArea= function()
- {
- var divArea = document.getElementById(this.AreaId);
- if (divArea != null)
- {
- return divArea;
- }
- return null;
- }
- var activeAreaId = null;
- // Function to show the DIV Layer
- JsArea.prototype.popareaup = function(x, y)
- {
- if (activeAreaId != null)
- jsAreaClose(activeAreaId);
- var divLayer = this.ContentArea();
- divLayer.style.position = 'absolute';
- divLayer.style.display = 'block';
- divLayer.style.left = x;
- divLayer.style.top = y;
- divLayer.οnmοuseοver= JsAreaMouseOver;
- divLayer.onmouseout = jsAreaMouseOut;
- activeAreaId = this.AreaId;
- return false;
- }
- // Function to hide the DIV Layer
- JsArea.prototype.hide = function()
- {
- var divLayer = this.ContentArea();
- if (divLayer != null)
- divLayer.style.display = 'none';
- return false;
- }
- // Function to be called
- // by Web forms to show the Popup Window
- function PopupArea(e, areaId)
- {
- if (e.pageX || e.pageY)
- {
- posx = e.pageX;
- posy = e.pageY;
- }
- else
- if (e.clientX || e.clientY)
- {
- posx = e.clientX + document.body.scrollLeft;
- posy = e.clientY + document.body.scrollTop;
- }
- var area = GetArea(areaId);
- area.popareaup(posx, posy);
- }
- // Function to hide the DIV Layer
- function jsAreaClose(areaId)
- {
- GetArea(areaId).hide();
- activeAreaId = divHangTimer = null;
- }
- var divHangTimer = null;
- // Function to keep the Div Layer
- // showing for a "period" of time
- // after that period, if the mouse
- // has been outside the DIV Layer,
- // it will be hidden automatically
- function KeepArea(areaId)
- {
- if (areaId == activeAreaId && divHangTimer != null)
- {
- clearTimeout(divHangTimer);
- divHangTimer = null;
- }
- }
- // Function to release the DIV Layer
- function RelArea(areaId)
- {
- if (areaId == activeAreaId && divHangTimer == null)
- divHangTimer = setTimeout('jsAreaClose(/'' + areaId + '/')', jsAreaShowTime);
- }
- // Function fired when mouse is over the
- // DIV Layer, used to keep the layer showing
- function JsAreaMouseOver(e)
- {
- if (!e)
- var e = window.event;
- var targ = e.target ? e.target : e.srcElement;
- KeepArea(activeAreaId);
- }
- // Function that fires when mouse is out of
- // the scope of the DIV Layer
- function jsAreaMouseOut(e)
- {
- if (!e)
- var e = window.event;
- var targ = e.relatedTarget ? e.relatedTarget : e.toElement;
- var activeAreaView = document.getElementById(activeAreaId);
- if (activeAreaView != null && !jsAreaContains(activeAreaView, targ))
- RelArea(activeAreaId);
- }
- function jsAreaContains(parent, child)
- {
- while(child)
- if (parent == child) return true;
- else
- child = child.parentNode;
- return false;
- }
3)调用实现:将 css,js脚本 生成相应文件 名称分别为 CSS.css 和js.js
- <!--head 区域内-->
- <LINK href="css.css" type="text/css" rel="stylesheet">
- <script src="js.js" type="text/javascript"></script>
- <script language="javascript">
- <!--
- function ProtectBox(e)
- {
- return false;
- }
- //-->
- </script>
- <!--body区域内->
- <!--注:最好用客户端控件-->
- <input id="Button1" type="button" value="button" OnKeyDown="return ProtectBox(event);" OnClick="PopupArea(event, 'divCountry')"/>
- <!--弹出的div -->
- <div class="popupWindow" id="divCountry">
- <table cellSpacing="0" cellPadding="0" width="250px" bgColor="#2557ad" border="0">
- <tr>
- <td align="right"><span style="CURSOR: hand" onclick="jsAreaClose('divCountry')"><img alt="Hide Popup" src="../../FormStyle/images/close.gif" border="0"></span></td>
- </tr>
- <tr>
- <td>
- <asp:Label ID="Label1" runat="server" valign="top" Text="驳回原因"></asp:Label>
- </td>
- </tr>
- <tr>
- <td>
- <asp:TextBox ID="TextBox2" runat="server" Height="83px" TextMode="MultiLine"></asp:TextBox>
- </td>
- </tr>
- <tr>
- <td>
- <asp:Button ID="Button3" runat="server" CssClass="btn1" Text="确定" OnClick="Button1_Click" />
- </td>
- </tr>
- </table>
- </div>
- override protected void OnInit(EventArgs e)
- {
- base.OnInit(e);
- }
填入这段代码即可