js setTimeout实现延迟关闭弹出层

更新时间：2010年04月01日 00:00:59 作者：

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

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SetTimeout.aspx.cs" Inherits="JavaScript.SetTimeout" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> #flyout { border: solid 2px Gray; background-color: #FFF999; width: 300px; height: 100px; display: none; } </style> <script type="text/javascript"> var flyoutTimer; function mouseOutEvent() { //Hide flyout after 1 second when the mouse move out of the flyout zone flyoutTimer = setTimeout(hideFlyout, 1000); } function mouseOverEvent() { //Clear the timer when the mouse move over the flyout clearTimeout(flyoutTimer); } function hideFlyout() { document.getElementById("flyout").style.display = "none"; } function showFlyout() { document.getElementById("flyout").style.display = "block"; mouseOutEvent(); } </script> </head> <body> <form id="form1" runat="server"> <div onclick="showFlyout()"> Click me to show flyout</div> <div id="flyout" onmouseout="mouseOutEvent()" onmouseover="mouseOverEvent()"> This is a flyout </div> </form> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

window.open以post方式将内容提交到新窗口
最近在做web项目，碰到需要跨页面传递参数的功能，就是那种需要把当前页面的内容带到新开的子窗体中，以前的做法是传一个id过去，然后在新窗口中去读数据库的内容;比较有意思的是直接通过调用form的submit方法不能触发onsubmit事件，查看了帮助文档，必须手动的触发，否则只能看到页面刷新而没有打开新窗口
2012-12-12
拖动时防止选中
本文主要介绍了拖动时防止选中的小知识点。具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
JavaScript 组件之旅（四）：测试 JavaScript 组件
本期，我们要讨论的话题是 JavaScript 的测试，以检查组件的状态和工作方式是否符合预期，还会介绍一个可以方便编写测试用例的测试方法。这里说的测试当然是使用自动化的测试手段，这是软件质量保证(QA)的重要环节。
2009-10-10
前端对话框项目之调用字节Coze API全过程
coze是字节跳动旗下的零代码大模型Agent定制平台,下面这篇文章主要介绍了前端对话框项目之调用字节Coze API的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2025-04-04
javascript校验价格合法性实例（必须输入2位小数）
这篇文章主要介绍了javascript校验价格合法性实例,其中价格必须是数字且必须输入2位小数,需要的朋友可以参考下
2014-05-05
深入理解javascript prototype的相关知识
这篇文章主要介绍了深入理解javascript prototype的相关知识,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09
javascript去除字符串左右两端的空格
这篇文章主要介绍了javascript去除字符串左右两端的空格,需要的朋友可以参考下
2015-02-02
原生javascript实现Tab选项卡切换功能
本文主要介绍了使用原生javascript实现Tab选项卡切换的功能，虽然jQuery有很多类似的插件，单jQuery库着实有点庞大，这种小功能还是直接用javascript来做就好了。
2015-01-01
JS运动相关知识点小结(附弹性运动示例)
这篇文章主要介绍了JS运动相关知识点,总结分析了JavaScript运动所涉及的相关知识点与注意事项,并附带了一个JavaScript弹性运动的实例供大家参考,需要的朋友可以参考下
2016-01-01
js运动应用实例解析
这篇文章主要针对js运动应用进行实例解析
2015-12-12

js setTimeout实现延迟关闭弹出层

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具