`

使用JAVASCRIPT实现弹出框,过一段时间自动消失

    博客分类:
  • js
阅读更多

关键字: 类 msn和QQ的浮出框

  1. <script>       
  2.   var oPopup;      
  3.   var popTop=50;      
  4.   var mytime;      
  5.   function closemsg(){      
  6.    try{      
  7.     clearTimeout(mytime);      
  8.    }catch(e){}      
  9.    oPopup.hide();      
  10.   }      
  11.         
  12.   function popshow(){      
  13.    //window.status=popTop;      
  14.    if(popTop>1160){      
  15.     closemsg();      
  16.     return;      
  17.    }      
  18.    if(popTop>1040&&popTop<1160){      
  19.     oPopup.show(screen.width-195,screen.height,250,1160-popTop);      
  20.    }      
  21.    if(popTop>1000&&popTop<1040){      
  22.     oPopup.show(screen.width-195,screen.height+(popTop-1160),250,116);      
  23.    }      
  24.    if(popTop<120){      
  25.     oPopup.show(screen.width-195,screen.height,250,popTop);      
  26.    }      
  27.    if(popTop<160){      
  28.     oPopup.show(screen.width-195,screen.height-popTop,250,116);      
  29.    }      
  30.    popTop+=10;      
  31.    mytime=setTimeout("popshow();",100);      
  32.   }      
  33.         
  34.   function popmsg(msgnum,msgstr){      
  35.    oPopup = window.createPopup();      
  36.    var winstr='<table style="border-top: #FFFFFF 1px solid; border-left: #FFFFFF 1px solid" cellSpacing=0 cellPadding=0 width="100%" bgcolor=#cfdef4 border=0>';      
  37.    winstr   +='  <tr>';      
  38.    winstr   +='   <td style="font-size: 12px; background-image: url(msgTopBg.gif); color: #0f2c8c" width=30 height=24></td>';      
  39.    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>';      
  40.    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>';      
  41.    winstr   +='  </tr>';      
  42.    winstr   +='  <tr>';      
  43.    winstr   +='   <td style="padding-right: 1px; background-image: url(1msgBottomBg.jpg); padding-bottom: 1px" colSpan=3 height=90>';      
  44.    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%">'      
  45.    winstr   +='                    您有<font color=#FF0000>'+msgnum+'</font>条新短消息<br><br>';      
  46.    winstr   +='           <div align=center style="word-break:break-all">';      
  47.    winstr   +=msgstr;      
  48.    winstr   +='     </div>';      
  49.    winstr   +='    </div>';      
  50.    winstr   +='   </td>';      
  51.    winstr   +='  </tr>';      
  52.    winstr   +='</table>';      
  53.           
  54.    oPopup.document.body.innerHTML = winstr;      
  55.    popshow();      
  56.   }      
  57.   <!--上面是定议,下面是调用-->     
  58.   popmsg(1,'msg');      
  59. </script>    

 

分享到:
评论

相关推荐

    使用JAVASCRIPT实现弹出框,过一段时间自动消失.txt

    ### 使用JavaScript实现弹出框,过一段时间自动消失的知识点解析 在现代网页开发中,弹出框作为一种常见的交互设计,用于向用户展示重要的通知、消息或警告。通过使用JavaScript,我们可以实现一个弹出框,使其在...

    jQuery右下角弹出框

    2. 信息提示框:提供一般性信息,可能没有关闭按钮,一段时间后自动消失。 3. 确认对话框:需要用户确认操作,有“确定”和“取消”两个选项。 4. 输入对话框:用户需要输入数据,通常包含输入框和提交按钮。 5. ...

    C#右下角信息弹出框JS代码

    此外,弹出框也可以设置为一段时间后自动消失。 5. **可扩展性**:弹出框的功能可以进一步扩展,比如添加确认按钮、链接或其他交互元素,以处理更复杂的用户交互。 6. **兼容性**:由于是基于JavaScript实现,需要...

    bootstrap提示框定时消失

    Bootstrap 提示框定时消失是网页动态效果的一种常见应用,它为用户提供了一种优雅的方式来显示信息、警告或错误,而这些信息会在一定时间后自动消失,无需用户手动关闭。这种功能通常借助于 JavaScript 库,如 ...

    Jquery右下角弹出框提示,多个提示向上叠加

    为了清理不再需要的提示,我们可以设置一个定时器,让提示框在一段时间后自动消失。同时,移除这个提示框并将 `z-index` 降低回当前的最高值,以保持提示框的叠加顺序: ```javascript function hideTooltip...

    CSS3+JS实现的不同交互弹出框带关闭按钮动态特效源码.zip

    3. **计时器**:使用`setTimeout`或`setInterval`实现延迟执行或周期性执行某些任务,例如在一段时间后自动关闭弹出框。 4. **闭包**:在函数内部创建新的作用域,以保持对变量的访问,这对于管理弹出框的生命周期...

    jquery做的 右下角弹出信息框

    6. **延迟与定时关闭**:有时候我们希望信息框在一段时间后自动消失,这可以通过 `setTimeout()` 函数配合 `fadeOut()` 来实现。例如,`setTimeout(function() { $("#infoBox").fadeOut(500); }, 5000)` 将在5秒后...

    模拟qq右下角信息弹出框

    - `hide()`: 隐藏弹出框的方法,包含了一个内部定时器函数来平滑地缩小弹出框直至消失。 - `onunload()`: 弹出框卸载事件,可被重写以执行特定操作。 - `oncommand()`: 弹出框上的命令事件处理函数,可以重写以...

    Web右下角弹出框提示,可叠加.zip

    开发者或用户可以根据需求设置弹出框的叠加次数,比如设置为5,那么在一段时间内就会有5个提示依次出现。这种灵活性允许用户根据实际场景调整提示的密度,确保信息的重要性和时效性得到恰当的体现。 实现这样的功能...

    JQ右下角弹框,自动向上不重叠弹出

    同时,这个函数还可以处理弹出框的关闭逻辑,比如点击关闭按钮或者设定一段时间后自动消失。 考虑到性能和用户体验,可能还需要添加一些额外的功能,如渐入渐出效果(使用`fadeIn`和`fadeOut`方法)、防止快速连续...

    div点击事件弹出层并逐渐消失

    在网页设计中,"div点击事件弹出层并逐渐消失"是一种常见的用户交互设计,它通常用于提供操作反馈或信息提示。这个功能结合了JavaScript(通常通过jQuery库实现)、CSS和HTML的div元素来完成。下面我们将详细探讨...

    Js弹出淡入淡出消息框.pdf

    JavaScript弹出淡入淡出消息框是一种常见的网页交互设计,用于向用户展示临时通知或提示信息。这种消息框通常会以平滑的动画效果出现,然后逐渐消失,提供了一种优雅的方式来传递信息而不打扰用户的正常浏览体验。在...

    js 弹出框只弹一次(二次修改之后的)

    3. JavaScript弹出框只弹一次的实现原理:通过JavaScript操作Cookie,可以在用户首次访问页面时设置一个特定的cookie值(比如“popped=yes”),表示该页面已经弹出过弹窗。当下次页面再次加载时,通过JavaScript...

    程序天下:JavaScript实例自学手册

    20.18 弹出框式邮件发送 20.19 把网站作为用户的Active桌面 20.20 判断是否安装了flash插件 第21章 流行技术:DOM和userData的应用技巧 21.1 使用userData保存文本内容 21.2 使用userData保存select标记 21.3 使用...

    《程序天下:JavaScript实例自学手册》光盘源码

    20.18 弹出框式邮件发送 20.19 把网站作为用户的Active桌面 20.20 判断是否安装了flash插件 第21章 流行技术:DOM和userData的应用技巧 21.1 使用userData保存文本内容 21.2 使用userData保存select标记 21.3 使用...

    jQuery弹出提示框插件zdialog

    自动消失提示框,可以在一段时间后自动关闭;以及加载中提示,为用户展示后台处理过程。 2. **自定义设置:** 该插件允许开发者自定义提示框的外观和行为,包括大小、颜色、图标、按钮文字等,以适应不同的设计需求...

    类似QQ弹出消息的效果

    此外,可以设置一个计时器,让消息在一段时间后自动消失。 5. **事件监听**:为了在合适的时间显示消息,我们需要监听特定的事件,比如用户完成某个操作或者服务器推送新消息。JS的`addEventListener`函数可以帮助...

    js渐隐弹出框.txt

    根据提供的文件信息,我们可以分析并总结出以下与“JS渐隐弹出框”相关的知识点: ### 1. 功能概述 这段JavaScript代码实现了一个渐隐显示提示信息的弹窗功能,同时还包括了表单重置、提交验证等功能。具体而言,...

    弹出层示例或一个页面多处弹出层

    1. 自动关闭:设定一段时间后自动消失。 2. 用户操作:点击弹出层外的区域、关闭按钮或其他指定元素。 3. 完成任务:如提交表单、选择选项后自动关闭。 综上所述,弹出层是网页设计中不可或缺的一部分,正确地...

    BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法

    当鼠标离开该元素时,弹出框将在一段时间后自动隐藏。然而,有时候我们希望在用户将鼠标移动到弹出框本身时,弹出框不会立即消失。这通常是通过调整Bootstrap的默认行为来实现的。 **原因分析:** 默认情况下,...

Global site tag (gtag.js) - Google Analytics