<!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>JavaScript实现网页右下角弹出窗口代码 - www.webdm.cn</title>
</head>
<style type="text/css">
#winpop { width:200px; height:0px; position:absolute; right:0; bottom:0; border:1px solid #666; margin:0; padding:1px; overflow:hidden; display:none;}
#winpop .title { width:100%; height:22px; line-height:20px; background:#FFCC00; font-weight:bold; text-align:center; font-size:12px;}
#winpop .con { width:100%; height:90px; line-height:80px; font-weight:bold; font-size:12px; color:#FF0000; text-decoration:underline; text-align:center} /* http://www.webdm.cn */
#silu { font-size:12px; color:#666; position:absolute; right:0; text-align:right; text-decoration:underline; line-height:22px;}
.close { position:absolute; right:4px; top:-1px; color:#FFF; cursor:pointer}
</style>
<script type="text/javascript">
function tips_pop(){
var MsgPop=document.getElementById("winpop");
var popH=parseInt(MsgPop.style.height);//将对象的高度转化为数字
if (popH==0){
MsgPop.style.display="block";//显示隐藏的窗口
show=setInterval("changeH('up')",2);
}
else {
hide=setInterval("changeH('down')",2);
}
}
function changeH(str) {
var MsgPop=document.getElementById("winpop");
var popH=parseInt(MsgPop.style.height);
if(str=="up"){
if (popH<=100){
MsgPop.style.height=(popH+4).toString()+"px";
}
else{
clearInterval(show);
}
}
if(str=="down"){
if (popH>=4){
MsgPop.style.height=(popH-4).toString()+"px";
}
else{
clearInterval(hide);
MsgPop.style.display="none"; //隐藏DIV
}
}
}
window.onload=function(){//加载
document.getElementById('winpop').style.height='0px';
setTimeout("tips_pop()",800);//3秒后调用tips_pop()这个函数
}
</script>
<body>
<div id="silu">
<button onclick="tips_pop()">3秒后会在右下角自动弹出窗口，如果没有弹出请点击这个按钮</button>
</div>
<div id="winpop">
<div class="title">您有新的短消息！<span class="close" onclick="tips_pop()">X</span></div>
<div class="con">1条未读信息(</div>
</div>
</body>
</html>
<a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！
分享到：
相关推荐
之前我们介绍过一款外观还不错的jQuery/CSS3内置关闭按钮的...今天要分享的是一款基于JavaScript的信息提示插件Notyf，你可以随时触发信息提示事件，插件可以帮助你在页面右下角弹出信息提示框，并自动关闭，非常实用。
通过JavaScript技术，点击页面上的标签或是点击按钮实现页面右下角弹出提示框信息，可搭配websocket等通信技术
本文给大家分享的是使用javascript实现简单的页面右下角提示信息框的方法和示例代码，有需要的小伙伴可以参考下。
web开发中常用到的右下角弹窗代码，当有提示类信息时从右下角弹出一个窗体，目前只支持ie,其它有兼容问题，如有解决者请赐教，感激不尽!!!
15.26 始终在屏幕右下角的图片 15.27 可拖动的图片 15.28 等比例缩略图 15.29 用JavaScript导出图像到Excel 15.30 使用VML打造可改变大小的圆框 15.31 JavaScript实现文档结构图 15.32 判断一副图片是否加载完毕 第...
15.26 始终在屏幕右下角的图片 15.27 可拖动的图片 15.28 等比例缩略图 15.29 用JavaScript导出图像到Excel 15.30 使用VML打造可改变大小的圆框 15.31 JavaScript实现文档结构图 15.32 判断一副图片是否加载完毕 第...
1.1.html 用JavaScript开发的弹出式“Hello World”实例。 1.2.html 在页面中输出的“Hello World”。 1.3.html 使用JavaScript进行文本框值的判断。 1.4.html 使用JavaScript对网页中的内容进行...
1.实现功能：当有新消息发布时，即在网页右下角弹出一个提示信息。 2.实现技术javascript、ajax、jsp、
实例282 文字从右向左依次弹出 443 实例283 文字从中间向两边展开 445 实例284 文字跑马灯特效 447 实例285 文字依次显示后快速收缩 449 实例286 文字的展开与收缩 451 实例287 状态栏中的文字依次弹出 452 10.2 ...
一、Window对象 ————————————————– ——————- 对象属性 window //窗户自身 window.self //引用本窗户window=window.self window.name ... //提示信息会话框 window.confirm(“text”) //
各参数意义：c:页面中间,l:页面左侧,t:页面顶部,r:页面右侧,b:页面顶部,lt:左上角,rt:右上角,lb:左下角,rb:右下角 winAlpha：弹出窗体拖动时的透明度，默认为0.8 //以下三个参数主要用于win方法（当然你也可以...
7.30 在超级链接上显示提示信息... 227 第8章 超链接篇.... 229 8.1 单击按钮链接到指定的网页... 229 8.2 定时前往其他页面... 230 8.3 随机显示网页... 231 8.4 取得目前页面的网址... 232 8.5 设定超链接...
功能：弹出一个警告框，在警告框内显示提示字符串文本。 4. confirm方法 语法格式： window.confirm(提示字符串) 功能：显示一个确认框，在确认框内显示提示字符串，当用户单击“确定”按钮 时该方法返回true，...
4.jQuery实现支付宝隐藏层提示信息内容的功能 5.jquery实现鼠标划过网址名称显示网站截图功能 6.jQuery带Tips动画提示通用表单验证插件下载(jquery validate),动画效果漂亮 7.jQuery鼠标移到下载地址滑出气泡...
赋值符号出现的话，永远都是将右边的值，赋值给左边的变量(从右向左运算) 2、常量 1、什么是常量 在程序中，一旦声明好，就不允许被修改的数据 2、声明常量 const 常量名=值; 常量名在命名时采用全大写形式 ...
-为空则使用默认的提示信息，默认的提示信息支持多语言，建议一般情况下使用默认信息。 +为表单字段增加MarkInvalid和GetMarkInvalidReference函数(feedback:sun1299shine)。 -增加示例：form/form_validate....
-为空则使用默认的提示信息，默认的提示信息支持多语言，建议一般情况下使用默认信息。 +为表单字段增加MarkInvalid和GetMarkInvalidReference函数(feedback:sun1299shine)。 -增加示例：form/form_validate....
实例083 在首页右下角弹出渐显的广告窗口 122 实例084 浮动的广告窗口 124 实例085 打开居中显示详细信息的新窗口 126 实例086 关闭弹出窗口时自动刷新父窗口 128 实例087 在弹出的对话框中选择个性头像 ...
实例212 在页面右下角弹出渐显的广告窗口 268 3.7 状态栏设计 269 实例213 跑马灯文字 269 实例214 状态栏中的收缩显示文字 270 实例215 状态栏中显示数字时钟 271 3.8 导航菜单设计 272 实例216 树状导航菜单 272 ...