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