温馨提示弹出框

<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>   
	<script type="text/javascript"> 

	//判断执行弹出信息提示框
	function showMessage() {
		var msg =[
			{content:"百度链接地址",link:"http://www.baidu.com"},
			{content:"谷歌链接地址",link:"http://www.google.com.hk"}
		];
	     		var MSG1 = new CLASS_MSN_MESSAGE("msg_div", 220, 150, "消息提醒:", "您有未录入的数据", msg);
	            MSG1.rect(null, null, null, screen.height - 50);
	            MSG1.speed = 10;
	            MSG1.step = 5;
	            MSG1.show();
	}

	function openLink(link) {
		top.document.location.href=link;
	}

	 /**
      *消息构造 
      */
	function CLASS_MSN_MESSAGE(id, width, height, caption, title, messageTmp, target, action) {

	    this.id = id;
	    this.title = title;
	    this.caption = caption;
	    this.message = messageTmp;
	    this.target = target;
	    this.action = action;
	    this.width = width ? width : 200;
	    this.height = height ? height : 120;
	    this.timeout = 5000;
	    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; 
	    location = 'new.jsp';
	    // location='../waterAlert/PromptAction.do?action=selectWaitLink'; 
	    this.hide();
	}

	/* 
	*    消息显示方法 
	*/
	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 += "<TD style='PADDING-RIGHT: 2px; PADDING-TOP: 2px' vAlign=center 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%;overflow: auto'>" + this.title + "<BR><BR>"
	    str += "<DIV style='WORD-BREAK: break-all;' align=left>"
	    var title = '';
	    for (var i = 0; i < this.message.length; i++) {
	    	title = this.message[i].content;
	    	title = title.length > 13 ? title.substring(0, 13)+"..." : title;	    	
	    	str += "<A href='javascript:parent.openLink(\""+this.message[i].link+"\");' hidefocus=true id='btCommand' title='"+ this.message[i].content+"'><FONT color=#ff0000>" + title + "</FONT></A><br/><br/>"
	    }
	    str += "</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();
	  // }
	} /**/
	/* 
	** 设置速度方法 
	**/
	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 MSG2 = new CLASS_MSN_MESSAGE("aa",200,120,"短消息提示:","您有2封消息","好的啊"); 
	//MSG2.rect(100,null,null,screen.height);
	//MSG1.speed = 20; 
	//MSG1.step = 10; 
	//MSG2.show(); 
	//--> 
</script>
</head>
<body οnlοad="showMessage();">
</body>
</html>


 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
美化PHP弹出提示可以通过使用CSS样式和JavaScript脚本来实现。以下是一个简单的方法: 首先,创建一个HTML文档,并包含一个按钮,用于触发弹出提示。在按钮上添加一个JavaScript函数的点击事件,例如: ```html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <button onclick="showAlert()">点击弹出提示</button> </body> </html> ``` 然后,创建一个CSS样式表(style.css),用于美化提示的外观,例如: ```css .alert { width: 200px; height: 100px; background-color: #f2f2f2; border: 1px solid #ccc; border-radius: 5px; text-align: center; line-height: 100px; font-size: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 接下来,创建一个JavaScript文件(script.js),编写showAlert函数,用于弹出提示,例如: ```javascript function showAlert() { var alertDiv = document.createElement("div"); alertDiv.className = "alert"; alertDiv.innerHTML = "这是一个美化的提示!"; document.body.appendChild(alertDiv); setTimeout(function(){ alertDiv.remove(); }, 2000); } ``` 在函数中,我们首先创建一个新的div元素,并设置其class为"alert",然后将提示的内容设置为"这是一个美化的提示!"。接着,将该div元素添加到文档的body元素中。setTimeout函数用于在指定时间后移除该提示。 最后,在同一目录下创建一个空的style.css和script.js文件,然后将以上代码粘贴到相应的文件中。运行HTML文件,点击按钮就能够看到一个美化的提示出现在屏幕上,提示会在2秒后自动关闭。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值