利用setTimeout实现延迟关闭弹出层

有时候我们希望弹出层能够实现延迟关闭，并且鼠标在弹出层区域移动的时候能够保持显现，下面是具体的实现代码。

代码
 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SetTimeout.aspx.cs" Inherits="JavaScript.SetTimeout" %>
 2 
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 <html xmlns="http://www.w3.org/1999/xhtml">
 5 <head runat="server">
 6     <title></title>
 7     <style type="text/css">
 8         #flyout
 9         {
10             border: solid 2px Gray;
11             background-color: #FFF999;
12             width: 300px;
13             height: 100px;
14             display: none;
15         }
16     </style>
17 
18     <script type="text/javascript">
19         var flyoutTimer;
20         function mouseOutEvent() {
21             //Hide flyout after 1 second when the mouse move out of the flyout zone
22             flyoutTimer = setTimeout(hideFlyout, 1000);
23         }
24         function mouseOverEvent() {
25             //Clear the timer when the mouse move over the flyout
26             clearTimeout(flyoutTimer);
27         }
28         function hideFlyout() {
29             document.getElementById("flyout").style.display = "none";
30         }
31         function showFlyout() {
32             document.getElementById("flyout").style.display = "block";
33             mouseOutEvent();
34         }
35     </script>
36 
37 </head>
38 <body>
39     <form id="form1" runat="server">
40     <div onclick="showFlyout()">
41         Click me to show flyout</div>
42     <div id="flyout" onmouseout="mouseOutEvent()" onmouseover="mouseOverEvent()">
43         This is a flyout
44     </div>
45     </form>
46 </body>
47 </html>

 

 

posted @ 2010-03-31 14:26  舍长  阅读(470)  评论(0)  编辑  收藏  举报