页面右下角弹出消息提示框，显示报警信息

最新推荐文章于 2024-04-21 16:15:58 发布
最新推荐文章于 2024-04-21 16:15:58 发布
阅读量778 收藏 1
点赞数
分类专栏： ajax 文章标签： prototype CSS JavaScript Ajax XHTML ViewUI

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ include file="/common/include.jspf"%>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>首页</title>   
    <link type="text/css" rel="Stylesheet" href="../css/index.css" />
    <script type="text/javascript" src="../css/JScript.js"></script>   
</head>
<SCRIPT language="javascript"> 
/**//* 
*    消息构造 
*/ 
function CLASS_MSN_MESSAGE(id,width,height,caption,title,message1,message,target,action){ 
    this.id     = id; 
    this.title  = title; 
    this.caption= caption;
 this.message1 = message1;
    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("../oilalarm/oilAlarmAction!selectOilAlarmByFlag.action");
};
/**//* 
*    消息显示方法 
*/ 
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=middle width='100%'>" + this.caption + "</TD>" 
        str += "<TD style='PADDING-RIGHT: 2px; PADDING-TOP: 2px' valign=middle align=right width=19>" 
        str += "<SPAN title=关闭 style='FONT-WEIGHT: bold; FONT-SIZE: 12px; CURSOR: hand; COLOR: red; MARGIN-RIGHT: 4px' id='btSysClose' >×</SPAN></TD>" 
        str += "</TR>" 
        str += "<TR>" 
        str += "<TD style='PADDING-RIGHT: 1px;PADDING-BOTTOM: 1px' colSpan=3 height=" + (h-28) + ">" 
        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>"+this.message1+"<A target='main' href='../oilalarm/oilAlarmAction!selectOilAlarmByFlag.action' hidefocus=false id='btCommand'><FONT color=#ff0000>" + this.message + "</FONT></A></DIV>" 
        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=false;}

    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 btClose = oPopup.document.getElementById("btSysClose"); 
 
    btClose.onclick = function(){ 
        me.close = true;
        me.hide(); 
    }; 
 
    var btCommand = oPopup.document.getElementById("btCommand"); 
    btCommand.onclick = function(){ 
        me.oncommand(); 
    };  
  var ommand = oPopup.document.getElementById("ommand"); 
      ommand.onclick = function(){ 
       //this.close = true;
    me.hide(); 
 window.open(ommand.href);
    };  
}; 
/**//*
** 设置速度方法
**/
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){}
};
//===============================================================
//id,width,height,caption,title,message,target,action

//用ajax获得要显示的信息开始
var xmlHttp;
var div;
function createXmlHttpRequest(){
//判断用户所使用的浏览器
 if(window.ActiveXObject){
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 }else if(window.ActiveXObject){
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP.4.0");
 }else if(window.ActiveXObject){
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
 }else if(window.XMLHttpRequest){
  xmlHttp = new XMLHttpRequest();
 }
 }

//用户点击发送请求 登录
function start(){
 createXmlHttpRequest();
 //设置回调函数
 xmlHttp.onreadystatechange=callback;
 var url ="../oilalarm/oilAlarmAction!messageAlarmInfo.action";
 xmlHttp.open("get",url,true);
 xmlHttp.send(null);
}

//回调函数
function callback(){    
 if(xmlHttp.readyState==4){     
  if(xmlHttp.status==200){     
   //处理结果     
   var value=xmlHttp.responseText;
   var msg = value.split(";");
   if(msg[1]>0){//有记录
    var count = msg[1];
    var message=msg[0];   
    var MSG1 = new CLASS_MSN_MESSAGE("aa",200,120,"报警信息提示：","您有"+count+"条报警消息",message,"查看详情"); 
       MSG1.rect(null,null,null,screen.height-50);
       MSG1.speed    = 10;
       MSG1.step    = 5;
       MSG1.show(); 
   }else{
    var count = msg[1];
    var message=msg[0];   
    var MSG1 = new CLASS_MSN_MESSAGE("aa",200,120,"报警信息提示：","您有"+count+"条报警消息",message,"查看详情"); 
       MSG1.rect(null,null,null,screen.height-50);
       MSG1.speed    = 10;
       MSG1.step    = 5;
       MSG1.show();
   }
 
  }
  }
}
</SCRIPT>
<body οnlοad="start()">
   <center>
     <div style=" margin-top:50px; width: 100%">
      <img src="../images/BGS.jpg" />
     </div>
    </center>
</body>
</html>

zhuxiange89
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页总提示安全警告？是不是你没有下载对安全浏览器？
m0_69916115的博客
06-20 676
相信很多人使用浏览器都遇到这个问题，那就是浏览器打开网页会莫名跳转到安全警告这类页面。相信大多数人看到这个都会慌，害怕隐私泄漏，而且唯一能做的就是直接关掉页面，并没去研究为何会这样，只是觉得换一个浏览器就行了。其实，我们只能推测是ISP劫持的行为。...
自动刷新网页 监控网页任何位置的内容变化 弹窗邮件提醒
01-12
自定义刷新间隔时间，定时刷新启动时间，监控网页关键字报警，监控网页html元素内容报警，多种报警方式，包括弹窗、声音、邮件等，也可以触发第三方程序运行。程序可隐藏后台运行
报警信息气泡提示框
10-28
有报警消息或者需要提示时，在桌面有下角弹出提示框，并且提示框电机关闭按钮，自动关闭提示框。点击提示框上的内容，响应响应的函数。
uialertview 图片_告警框（UIAlertView）
weixin_33304777的博客
01-12 149
** IOS 开发中 Whose view is not in the window hierarchy 错误的解决办法 **在 IOS 开发当中经常碰到 whose view is not in the window hierarchy 的错误，该错误简单的说，是由于 "ViewController" 还没有被加载，就调用该 ViewController 或者 ViewController 内的...
若依里面集成提醒机制和通知机制具体咋实现，要详细步骤和代码
最新发布
m0_47225828的博客
04-21 991
若依（RuoYi）是一个基于Spring Boot的开源快速开发平台，它提供了许多基础功能和模块，包括用户管理、权限控制、代码生成等。
wpf 消息提示框（仿QQ左下角提示框）
11-24
本示例“wpf 消息提示框（仿QQ左下角提示框）”旨在模仿QQ应用中的左下角弹出提示功能，这种提示框通常用于快速显示通知信息，而不会打断用户的正常操作流程。 首先，我们要理解WPF的基本概念。WPF是微软.NET ...
div弹出模式窗体，消息框样式。
12-27
在网页设计中，"div弹出模式窗体，消息框样式"是一个常见的需求，用于向用户展示重要信息、警告或确认操作。这种技术利用HTML的`<div>`元素结合CSS来创建可定制的对话框，提供了更加丰富和交互性的用户体验。下面...
asp.net 实现弹出窗口功能
09-25
在 web应用中，比如OA中，经常要用到一些提示，比如EMAIL到达了，就做个象MSN那样的提示框，弹出给用户提示，然后再关闭。在ASP.net 2.0的ajax中，这个现在不难做到了，刚好看到老外的一篇文章，讲解到，下面小结之
ABB机器人10106故障报警解决办法（图文）.docx
07-26
1. 当机器人示教器显示10106故障报警时，首先要确认报警信息，即“到保养时间，应检修机器人”。这是系统自动检测到机器人的维护周期即将或已经结束。 2. 面对报警提示，用户需要点击示教器屏幕右下方的“确认”...
若依框架增加消息弹框提示
08-04
若依框架增加消息弹框提示： 1、消息弹框 2、跳转到任务详情 3、titile闪烁
jq页面消息报警提示
10-31
使用 pagealert 的插件 实现页面消息弹框。可定时，可长久。可链接
jQuery弹出消息提示框
07-10
弹出消息提示框 弹出消息提示框弹出消息提示框 弹出消息提示框 弹出消息提示框
Zabbix监控客户端及实现邮件、微信报警
lvjianzhaoa的博客
11-10 850
博文大纲：一、安装Zabbix agent端二、登录web界面添加agent主机三、Zabbix监控MySQL数据库四、配置邮件报警五、配置企业微信报警 注：本文是基于博文：部署zabbix监控服务器 的环境。 这篇博文用到的所有软件都可以在这个链接获得：Zabbix 软件包 一、安装Zabbix agent端 这里我启动了一台IP为192.168.20.3的服务器，用于充当agent端。 [...
vue使用WebSocket实现实时报警弹窗
weixin_44801790的博客
05-05 6066
使用WebSocket实现实时报警，实现当接收到报警时弹出弹窗显示报警内容和发错报警声音。
弹窗提示插件（全局提示弹窗）
a3325779的博客
12-27 1165
弹窗可以说是每个项目都会用到的一个东西，弹窗有很多种，有系统默认的，网上也有一堆插件。默认的弹窗一般不好看，都会被设计嫌弃的，如果用插件的话，又比较占资源空间，所有我开发的项目一般都是自己封装全局同用插件的，下面来细说一下这些弹窗的用法。 系统默认的有这3种常用的 //弹出对话框并输出一段提示信息 function ale() { //弹出一个对话框 ...
实现第一次打开页面右下角弹出消息
hayabusa
04-08 2731
在初始化页面的时候弹出消息框，这和后台消息推送是不一样的，只是在加载页面的时候去查询一些数据然后通过弹出框的形式来显示：以达到提示用户注意目的！首先要下载jquery.messager.js插件，引入js&lt;scripttype="text/javascript"src="&lt;%=request.getContextPath()%&gt;/javascript/jquery-1.8.2.j...
写一个winform右下角弹出消息提示框的程序
09-09
在WinForm中实现右下角弹出消息提示框的程序可以通过以下步骤进行： 1. 创建WinForm应用程序 首先，我们需要创建一个WinForm应用程序。可以使用Visual Studio等集成开发环境来创建一个新的WinForm项目。 2. 设计主...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值