网页右下角弹出提示框

实现Jquery右下角弹出框的向上叠加提示 div有时,我们需要根据不同的使用场景,提供给用户自定义提示框显示时间的选项。这可以通过动态设置中的延迟时间来实现。// 根据用户自定义的时间显示提示框// 例如,让用户可以在1秒到10秒之间自定义显示时间// 默认3秒var userInputDuration = prompt("请输入提示框显示时间(毫秒):"); 阅读详情

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
   <title>JavaScript提示框</title>
   <script type="text/javascript">
   
   /**
   * 类名:CLASS_MSN_MESSAGE
   * 功能:提供类似MSN消息框
   * 示例:
   * var MSG = new CLASS_MSN_MESSAGE("aa",200,120,"短消息提示:","您有1封消息","今天请我吃饭哈");
   * MSG.show();
    * 消息构造
   */
   function CLASS_MSN_MESSAGE(id,width,height,caption,title,message,target,action){
      this.id       = id;
      this.title    = title;
      this.caption = caption;
      this.message = message;
      this.target   = target;
      this.action   = action;
      this.width    = width?width:200;
      this.height   = height?height:120;
      this.timeout = 150;
      this.speed    = 20;
      this.step     = 1;
      this.right    = screen.width -1;
      this.bottom   = screen.height;
      this.left     = this.right - this.width;
      this.top      = this.bottom - this.height;
      this.timer    = 0;
      this.pause    = false;
      this.close    = false;
      this.autoHide = true;
   }
 
   /**
   * 消息隐藏方法
   */
   CLASS_MSN_MESSAGE.prototype.hide = function(){
      if(this.onunload()){
          var offset = this.height>this.bottom-this.top?this.height:this.bottom-this.top;
          var me = this;
          if(this.timer>0){  
              window.clearInterval(me.timer);
          }
 
          var fun = function(){
              if(me.pause==false||me.close){
                  var x = me.left;
                  var y = 0;
                  var width = me.width;
                  var height = 0;
                  if(me.offset>0){
                      height = me.offset;
                  }
      
                  y = me.bottom - height;
                  if(y>=me.bottom){
                      window.clearInterval(me.timer);
                      me.Pop.hide();
                  } else {
                      me.offset = me.offset - me.step;
                  }
                  me.Pop.show(x,y,width,height);   
              }            
          }
          this.timer = window.setInterval(fun,this.speed)     
      }
   }
 
   /**
   * 消息卸载事件,可以重写
   */
   CLASS_MSN_MESSAGE.prototype.onunload = function() {
        return true;
   }
   /**
   * 消息命令事件,要实现自己的连接,请重写它
   */
   CLASS_MSN_MESSAGE.prototype.oncommand = function(){
        this.close = true;
        this.hide();
        window.open("
http://www.lost63.com");
   }
   /**
   * 消息显示方法
   */
   CLASS_MSN_MESSAGE.prototype.show = function(){
        var oPopup = window.createPopup(); //IE5.5+
        this.Pop = oPopup;
 
        var w = this.width;
        var h = this.height;
 
        var str = "<div style='border-right: #455690 1px solid; border-top: #a6b4cf 1px solid; z-index: 99999; left: 0px; border-left: #a6b4cf 1px solid; width: " + w + "px; border-bottom: #455690 1px solid; position: absolute; top: 0px; height: " + h + "px; background-color: #c9d3f3'>"
          str += "<table style='border-top: #ffffff 1px solid; border-left: #ffffff 1px solid' cellspacing=0 cellpadding=0 width='100%' bgcolor=#cfdef4 border=0>"
          
          str += "<tr>"
          str += "<td style='font-size: 12px;color: #0f2c8c' width=30 height=24></td>"
          str += "<td style='padding-left: 4px; font-weight: normal; font-size: 12px; color: #1f336b; padding-top: 4px' valign=center width='100%'>" + this.caption + "</td>"
          str += "</tr>"
          str += "<tr>"
          /*height:设置里面内容区域的高度 */
          str += "<td style='padding-right: 1px;padding-bottom: 1px' colspan=3 height=" + (h-50) + ">"
          str += "<div style='border-right: #b9c9ef 1px solid; padding-right: 8px; border-top: #728eb8 1px solid; padding-left: 8px; font-size: 12px; padding-bottom: 8px; border-left: #728eb8 1px solid; width: 100%; color: #1f336b; padding-top: 8px; border-bottom: #b9c9ef 1px solid; height: 100%'>" + this.title + "<br><br>"
          str += "<div style='word-break: break-all' align=left><font color=#ff0000>" + this.message + "</font></div>"
          str += "</div>"
          str += "</td>"
          str += "</tr>"
          str += "<tr align=center>"
          str += "<td colspan=3>"
          str += "<div style='padding: 2 0 2 0;'>"
          str += "<span id='buttonClose'><input type='button' title=关闭 value=确认 style='width:60px; height:20px; border-right: #002D96 1px solid; padding-right: 2px; border-top: #002D96 1px solid; padding-left: 2px; FONT-SIZE: 12px; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); border-left: #002D96 1px solid; CURSOR: hand; color: black; padding-top: 2px; border-bottom: #002D96 1px solid;'></span>"
          str += "</div>"
          str += "</td>"
          str += "</tr>"
          str += "</table>"
          str += "</div>"

        oPopup.document.body.innerHTML = str;
        this.offset = 0;
        var me = this;
 
        oPopup.document.body.onmouseover = function(){me.pause=true;}
        oPopup.document.body.onmouseout = function(){me.pause=true;}
 
        var fun = function(){
            var x = me.left;
            var y = 0;
            var width      = me.width;
            var height     = me.height;
 
                if(me.offset>me.height){
                    height = me.height;
                } else {
                    height = me.offset;
                }
 
            y = me.bottom - me.offset;
            if(y<=me.top){
                //me.timeout--;
                if(me.timeout==0){
                    window.clearInterval(me.timer);
                    if(me.autoHide){
                        me.hide();
                    }
                }
            } else {
                me.offset = me.offset + me.step;
            }
            me.Pop.show(x,y,width,height);  
        }
 
        this.timer = window.setInterval(fun,this.speed)     
  
    //"确认"关闭事件
  
        var buttonClose = oPopup.document.getElementById("buttonClose");
        buttonClose.onclick = function(){
            me.close = true;
            me.hide();
        }
   }
   /*
   * 设置速度方法
   */
   CLASS_MSN_MESSAGE.prototype.speed = function(s){
      var t = 20;
      try {
          t = praseInt(s);
      } catch(e){}
      this.speed = t;
   }
   /**
   * 设置步长方法
   */
   CLASS_MSN_MESSAGE.prototype.step = function(s){
      var t = 1;
      try {
          t = praseInt(s);
      } catch(e){}
      this.step = t;
   }
 
   CLASS_MSN_MESSAGE.prototype.rect = function(left,right,top,bottom){
      try {
          this.left        = left    !=null?left:this.right-this.width;
          this.right        = right    !=null?right:this.left +this.width;
          this.bottom        = bottom!=null?(bottom>screen.height?screen.height:bottom):screen.height;
          this.top        = top    !=null?top:this.bottom - this.height;
      } catch(e){}
   }
  
  
   var MSG1 = new CLASS_MSN_MESSAGE("aa",240,150,"管理员:","思路决定出路","迷失路上");
      MSG1.rect(null,null,null,screen.height-50);
      MSG1.speed    = 10;
      MSG1.step    = 5;

   
   /**
   * 显示提示框
   */
   function showMSG(){
    MSG1.show();
   }
  
   </script>
</head>

<body>

   <input type="button" value="按钮" onclick="showMSG(); ">
   <br>
   <hr>

</body>
</html>

页面设计,网页右下方弹出框,类似QQ,或者优快云右下角的提示框 页面设计用js代码,网页右下方弹出框,类似QQ,或者优快云右下角的提示框,费了两天时间,收集的差不多了,共收集了20多少实例,希望对各位有所帮助。 立即下载

相关推荐

采购订单定价策略 超详细

‘需求’字段里填写的是一个例程编号(例程是一段判断程序),如果我们在需求中维护了例程编号,那只有这个例程条件被满足时,这个条件表才会被系统自动读取。一部分的条件表只有在凭证项目满足一定的条件时才会被读取。 ‘排斥的’字段如果别勾中的话,那表明如果这个条件表被系统成功读取到数据后,系统将停止这个存取顺序的执行,否则,系统将继续执行下去。 注意:a、如果我们给某个条件类型设定了有效期的话,那我们必须给这个条件类型分配一个存取顺序。 b、不能给一个抬头条件分配存取顺序。 是...

竹大的博客 1万+

进入网页页面,右下角弹出提醒框

【代码】进入网页页面,右下角弹出提醒框。

u013733643的博客 586

yolov5 部署jetson nano(通用) 保姆级教学

Jetson nano从配置环境到yolov5成功推理检测全过程 文章目录Jetson nano从配置环境到yolov5成功推理检测全过程一、烧录镜像二、配置环境并成功推理1.更新系统和包2、配置环境2.1 配置CUDA2.2 修改Nano板的显存1.打开终端输入:2.修改nvzramconfig.sh文件:3.重启:4.终端输入:3、安装archiconda(也就是jetson nano板上的anaconda)1.下载地址:2.安装:3.测试conda:4.创建运行yolov5的虚拟环境:5.在conda

weixin_44312422的博客 3万+

HTML网页右下角弹出消息通知提示框

Naranja网页右下角弹出消息通知提示框js代码,点击按钮触发,包含了4种消息提示框样式:默认(log)、成功(success)、警告(warn)、危险 (error)。

SmileSunshines的博客 2883

科研党必备:5分钟搞定Arxiv论文批量导入NoteExpress(附PDF自动下载技巧)

本文为科研人员提供了一套高效的自动化工作流,实现从Arxiv批量检索论文、自动下载PDF到无缝导入NoteExpress的全过程。通过Python脚本和NASA ADS等工具,可大幅提升文献管理效率,特别适合需要追踪前沿动态的研究生和科研团队。

orange的博客 398

ROS激光雷达动态避障算法优化(C++实战)

本文深入探讨了ROS激光雷达动态避障算法的C++实战优化。针对动态环境的核心挑战,文章系统性地介绍了从激光数据预处理(降噪、瘦身)、动态障碍物检测与跟踪,到基于动态窗口法(DWA)的智能决策与调优的全流程。重点分享了如何将障碍物速度预测融入DWA打分函数,以实现更安全、流畅的避障,并提供了工程架构、性能优化及真机调试的实用建议。

weixin_29192141的博客 947

HTML纯代码给网页增加右下角提示框弹窗提示图片+文字纯HTML代码无需插件

HTML纯代码给网页增加右下角提示框弹窗提示图片+文字纯HTML代码无需插件。

宋佳乐旗下博客 4355

uniapp - 使用 <video> 播放视频黑屏,浏览器控制台报错: DOMException: The element has on supported sources.(详细完美解决方案)

uniapp video 视频播放黑屏,uniapp 报错DOMException: The element has on supported sources.,uniapp如何解决DOMException: The element has on supported sources.,uniapp使用video标签无法播放视频出现黑屏问题处理,uniapp解决video视频黑屏显示0秒,并且浏览器报错DOMException: The element has on supported sources.,un

✅ 精选推荐文章 7056

html固定在屏幕右下角的信息(提示信息,广告)

html固定在屏幕右下角的信息(提示信息,广告)

xiaoyu的博客 6387

安装西门子TIA Portal V15.1提示先决条件不足如何处理?

安装TIA Portal STEP 7 Professional WinCC Professional V15.1提示先决条件不足,需要如何才能够满足安装条件呢? 1.硬件要求: 安装 STEP 7 Basic / Professional V15.1 的计算机必须至少满足以下需求: 处理器: Core i5-6440EQ 3.4 GHz 或者相当 内存: 16GB或者更多(对于大型项目,为32GB) 硬盘:SSD,配备至少50GB的存储空间 图形分辨率:最小 1920 x 1080 显示器:15.6"

Robot_PLC_HMI_Automation 2万+

【以太网硬件十二】以太网端口自协商过程解密之二

简述以太网端口自协商的过程

highman110的博客 2489

如何在网页右下角弹出popup提示框

    如何在网页右下角弹出提示框        var oPopup = window.createPopup();var popTop=50;function popmsg(msgstr){var winstr="";winstr+=" ";winstr+=""+msgstr+"";oPopup.document.body.innerHTML = winstr;popshow();}f

苏某人的传奇世界 1983

Agile Modbus使用和学习笔记

i < len;这里仅仅需要提供获取函数即可,离散输入是只读类型i++) {return 0;只读类型寄存器i++) {return 0;i < len;

Car12 169

html右下角弹出提醒页面,js网页右下角提示框实例

function messageTip(pJso) {_.init(this, pJso, {name: 'msg'//提示框标签ID});this.eMsg = document.getElementById(this.name);}messageTip.prototype ={//提示框始终在最右下角rePosition: function(_this) {var divHeight = pa...

weixin_42305377的博客 657

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

自动弹出网页右下角消息提示框特效

<!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"> <meta http-equ

a708964454的专栏 2131

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

近期 关于QQ 或MSN 右下角弹出提示框 解决方案 网页

需要右下角弹出提示框功能 以下是在网上找到的两个方案 http://www.codeproject.com/dialog/statusbarmsgwnd.asp http://www.codeproject.com/dialog/taskbarnotifier.asp   这两个网址是不错的解决方案 都是codeproject上面开源的   还有一个csdn'上的前辈写的 也不错 虽

蜗牛的专栏 919

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

jquery右下角弹出提示框

右下角弹出提示框想必大家都有见到过吧,其实有实现方法有很多,在本文为大家详细介绍在jquery中具体的实现,感兴趣的朋友可以了解下 复制代码代码如下:           弹出提示框右下角显示-www.jbxue.com    body{ margin:0px;padding:0px; height:5000px; }  .botk{right:5px;positi

vip_linux的专栏 1415

php 右下脚弹窗,JavaScript实现右下角弹出提示框的方法

在我们日常开发工作中,我们会经常遇到需要在页面的右下角弹出提示框或者广告的小功能,这样是为了更好的让用户体验,那么如何实现网页右下角弹出提示框呢?今天我们就带大家介绍下JavaScript实现右下角弹出提示框的方法!本文实例讲解了网页右下角弹出广告信息框实例代码,分享给大家供大家参考,具体内容如下效果图:具体代码:网页右下角的信息框#winpop {width:200px;height:0px;p...

weixin_34230075的博客 266

jquery右下角弹出提示框示例代码

弹出提示框右下角显示 body{ margin:0px;padding:0px; height:5000px; } .botk{right:5px;position:fixed;width:100px;_position:absolute; _top: expression(documentElement.scrollTop + documentElement.clientHeight-this

600

php右小角弹出框,js右下角弹出提示框示例代码

本文实例讲解了网页右下角弹出广告信息框实例代码,分享给大家供大家参考,具体内容如下效果图:具体代码:网页右下角的信息框#winpop {width:200px;height:0px;position:absolute;right:0;bottom:0;border:1px solid #666;margin:0;padding:1px;overflow:hidden;display:none;}#...

weixin_30444625的博客 390

js实现右下角提示框

 实现右下角提示框的Jquery插件 (popup.js) //兼容ie6的fixed代码 //jQuery(function($j){ // $j('#pop').positionFixed() //}) (function($j){ $j.positionFixed = function(el){ $j(el).each(function(){

whazhl的专栏 842

页面右下角弹出提示信息,类QQ右下角新闻[转]

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta h

joerong666 218

网页右下角弹出广告窗口 超简洁

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>网页右下角的信息框</title></head><style type="text/css">#winpop { width:200px; height:0px; ...

weixin_30950887的博客 159

右下角弹出框代码 网页特效 代码 html js

实现了自动弹出并自动消失。右下角弹出框

TendaRouter的专栏 2586
上一篇: window.createPopup()
下一篇: 关于document.cookie的使用
zi_jun
博客等级 码龄18年 109粉丝 7原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值