`
- 浏览:
313507 次
- 性别:
- 来自:
上海
-
使用JAVASCRIPT实现弹出框,过一段时间自动消失
关键字: 类 msn和QQ的浮出框
- <script>
- var oPopup;
- var popTop=50;
- var mytime;
- function closemsg(){
- try{
- clearTimeout(mytime);
- }catch(e){}
- oPopup.hide();
- }
-
- function popshow(){
-
- if(popTop>1160){
- closemsg();
- return;
- }
- if(popTop>1040&&popTop<1160){
- oPopup.show(screen.width-195,screen.height,250,1160-popTop);
- }
- if(popTop>1000&&popTop<1040){
- oPopup.show(screen.width-195,screen.height+(popTop-1160),250,116);
- }
- if(popTop<120){
- oPopup.show(screen.width-195,screen.height,250,popTop);
- }
- if(popTop<160){
- oPopup.show(screen.width-195,screen.height-popTop,250,116);
- }
- popTop+=10;
- mytime=setTimeout("popshow();",100);
- }
-
- function popmsg(msgnum,msgstr){
- oPopup = window.createPopup();
- var winstr='<table style="border-top: #FFFFFF 1px solid; border-left: #FFFFFF 1px solid" cellSpacing=0 cellPadding=0 width="100%" bgcolor=#cfdef4 border=0>';
- winstr +=' <tr>';
- winstr +=' <td style="font-size: 12px; background-image: url(msgTopBg.gif); color: #0f2c8c" width=30 height=24></td>';
- winstr +=' <td style="font-weight: normal; font-size: 12px; background-image: url(msgTopBg.gif); color: #1f336b; padding-top: 4px;padding-left: 4px" valign=center width="100%"> 管理平台消息提示:</td>';
- winstr +=' <td style="background-image: url(msgTopBg.gif); padding-top: 2px;padding-right:2px" valign=center align=right width=19><span title=关闭 style="cursor: hand;color:red;font-size:12px;font-weight:bold;margin-right:4px;" onclick="window.parent.closemsg();">×</span></td>';
- winstr +=' </tr>';
- winstr +=' <tr>';
- winstr +=' <td style="padding-right: 1px; background-image: url(1msgBottomBg.jpg); padding-bottom: 1px" colSpan=3 height=90>';
- winstr +=' <div style="border-right: #b9c9ef 1px solid; padding-right: 13px; border-top: #728eb8 1px solid; padding-left: 13px; font-size: 12px; padding-bottom: 13px; border-left: #728eb8 1px solid; width: 100%; color: #1f336b; padding-top: 6px; border-bottom: #b9c9ef 1px solid; height: 100%">'
- winstr +=' 您有<font color=#FF0000>'+msgnum+'</font>条新短消息<br><br>';
- winstr +=' <div align=center style="word-break:break-all">';
- winstr +=msgstr;
- winstr +=' </div>';
- winstr +=' </div>';
- winstr +=' </td>';
- winstr +=' </tr>';
- winstr +='</table>';
-
- oPopup.document.body.innerHTML = winstr;
- popshow();
- }
- <!--上面是定议,下面是调用-->
- popmsg(1,'msg');
- </script>
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
### 使用JavaScript实现弹出框,过一段时间自动消失的知识点解析 在现代网页开发中,弹出框作为一种常见的交互设计,用于向用户展示重要的通知、消息或警告。通过使用JavaScript,我们可以实现一个弹出框,使其在...
2. 信息提示框:提供一般性信息,可能没有关闭按钮,一段时间后自动消失。 3. 确认对话框:需要用户确认操作,有“确定”和“取消”两个选项。 4. 输入对话框:用户需要输入数据,通常包含输入框和提交按钮。 5. ...
此外,弹出框也可以设置为一段时间后自动消失。 5. **可扩展性**:弹出框的功能可以进一步扩展,比如添加确认按钮、链接或其他交互元素,以处理更复杂的用户交互。 6. **兼容性**:由于是基于JavaScript实现,需要...
Bootstrap 提示框定时消失是网页动态效果的一种常见应用,它为用户提供了一种优雅的方式来显示信息、警告或错误,而这些信息会在一定时间后自动消失,无需用户手动关闭。这种功能通常借助于 JavaScript 库,如 ...
为了清理不再需要的提示,我们可以设置一个定时器,让提示框在一段时间后自动消失。同时,移除这个提示框并将 `z-index` 降低回当前的最高值,以保持提示框的叠加顺序: ```javascript function hideTooltip...
3. **计时器**:使用`setTimeout`或`setInterval`实现延迟执行或周期性执行某些任务,例如在一段时间后自动关闭弹出框。 4. **闭包**:在函数内部创建新的作用域,以保持对变量的访问,这对于管理弹出框的生命周期...
6. **延迟与定时关闭**:有时候我们希望信息框在一段时间后自动消失,这可以通过 `setTimeout()` 函数配合 `fadeOut()` 来实现。例如,`setTimeout(function() { $("#infoBox").fadeOut(500); }, 5000)` 将在5秒后...
- `hide()`: 隐藏弹出框的方法,包含了一个内部定时器函数来平滑地缩小弹出框直至消失。 - `onunload()`: 弹出框卸载事件,可被重写以执行特定操作。 - `oncommand()`: 弹出框上的命令事件处理函数,可以重写以...
开发者或用户可以根据需求设置弹出框的叠加次数,比如设置为5,那么在一段时间内就会有5个提示依次出现。这种灵活性允许用户根据实际场景调整提示的密度,确保信息的重要性和时效性得到恰当的体现。 实现这样的功能...
同时,这个函数还可以处理弹出框的关闭逻辑,比如点击关闭按钮或者设定一段时间后自动消失。 考虑到性能和用户体验,可能还需要添加一些额外的功能,如渐入渐出效果(使用`fadeIn`和`fadeOut`方法)、防止快速连续...
在网页设计中,"div点击事件弹出层并逐渐消失"是一种常见的用户交互设计,它通常用于提供操作反馈或信息提示。这个功能结合了JavaScript(通常通过jQuery库实现)、CSS和HTML的div元素来完成。下面我们将详细探讨...
JavaScript弹出淡入淡出消息框是一种常见的网页交互设计,用于向用户展示临时通知或提示信息。这种消息框通常会以平滑的动画效果出现,然后逐渐消失,提供了一种优雅的方式来传递信息而不打扰用户的正常浏览体验。在...
3. JavaScript弹出框只弹一次的实现原理:通过JavaScript操作Cookie,可以在用户首次访问页面时设置一个特定的cookie值(比如“popped=yes”),表示该页面已经弹出过弹窗。当下次页面再次加载时,通过JavaScript...
20.18 弹出框式邮件发送 20.19 把网站作为用户的Active桌面 20.20 判断是否安装了flash插件 第21章 流行技术:DOM和userData的应用技巧 21.1 使用userData保存文本内容 21.2 使用userData保存select标记 21.3 使用...
20.18 弹出框式邮件发送 20.19 把网站作为用户的Active桌面 20.20 判断是否安装了flash插件 第21章 流行技术:DOM和userData的应用技巧 21.1 使用userData保存文本内容 21.2 使用userData保存select标记 21.3 使用...
自动消失提示框,可以在一段时间后自动关闭;以及加载中提示,为用户展示后台处理过程。 2. **自定义设置:** 该插件允许开发者自定义提示框的外观和行为,包括大小、颜色、图标、按钮文字等,以适应不同的设计需求...
此外,可以设置一个计时器,让消息在一段时间后自动消失。 5. **事件监听**:为了在合适的时间显示消息,我们需要监听特定的事件,比如用户完成某个操作或者服务器推送新消息。JS的`addEventListener`函数可以帮助...
根据提供的文件信息,我们可以分析并总结出以下与“JS渐隐弹出框”相关的知识点: ### 1. 功能概述 这段JavaScript代码实现了一个渐隐显示提示信息的弹窗功能,同时还包括了表单重置、提交验证等功能。具体而言,...
1. 自动关闭:设定一段时间后自动消失。 2. 用户操作:点击弹出层外的区域、关闭按钮或其他指定元素。 3. 完成任务:如提交表单、选择选项后自动关闭。 综上所述,弹出层是网页设计中不可或缺的一部分,正确地...
当鼠标离开该元素时,弹出框将在一段时间后自动隐藏。然而,有时候我们希望在用户将鼠标移动到弹出框本身时,弹出框不会立即消失。这通常是通过调整Bootstrap的默认行为来实现的。 **原因分析:** 默认情况下,...