页面右下角弹出提示框示例代码js版


Posted in Javascript onAugust 02, 2013
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 
<!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=gb2312" /> 
<title>无标题文档</title> 
<style type="text/css"> 
* {margin:0px;padding:0px;} 
html,body { height:100%;} 
body { font-size:14px; line-height:24px;} 
#tip { 
position: absolute; 
right: 0px; 
bottom: 0px; 
height: 0px; 
width: 180px; 
border: 1px solid #CCCCCC; 
background-color: #eeeeee; 
padding: 1px; 
overflow:hidden; 
display:none; 
font-size:12px; 
z-index:10; 
} 
#tip p { padding:6px;} 
#tip h1,#detail h1 { 
font-size:14px; 
height:25px; 
line-height:25px; 
background-color:#0066CC; 
color:#FFFFFF; 
padding:0px 3px 0px 3px; 
filter: Alpha(Opacity=100); 
} 
#tip h1 a,#detail h1 a { 
float:right; 
text-decoration:none; 
color:#FFFFFF; 
} 
#shadow { 
position:absolute; 
width:100%; 
height:100%; 
background-color:#000000; 
z-index:11; 
filter: Alpha(Opacity=70); 
display:none; 
overflow:hidden; 
} 
#detail { 
width:500px; 
height:200px; 
border:3px double #ccc; 
background-color:#FFFFFF; 
position:absolute; 
z-index:30; 
display:none; 
left:30%; 
top:30% 
} 
</style> 
<script type="text/javascript"> 
var handle; 
function start() 
{ 
var obj = document.getElementById("tip"); 
if (parseInt(obj.style.height)==0) 
{ obj.style.display="block"; 
handle = setInterval("changeH('up')",2); 
}else 
{ 
handle = setInterval("changeH('down')",2) 
} 
} 
function changeH(str) 
{ 
var obj = document.getElementById("tip"); 
if(str=="up") 
{ 
if (parseInt(obj.style.height)>200) 
clearInterval(handle); 
else 
obj.style.height=(parseInt(obj.style.height)+8).toString()+"px"; 
} 
if(str=="down") 
{ 
if (parseInt(obj.style.height)<8) 
{ clearInterval(handle); 
obj.style.display="none"; 
} 
else 
obj.style.height=(parseInt(obj.style.height)-8).toString()+"px"; 
} 
} 
function showwin() 
{ 
document.getElementsByTagName("html")[0].style.overflow = "hidden"; 
start(); 
document.getElementById("shadow").style.display="block"; 
document.getElementById("detail").style.display="block"; 
} 
function recover() 
{ 
document.getElementsByTagName("html")[0].style.overflow = "auto"; 
document.getElementById("shadow").style.display="none"; 
document.getElementById("detail").style.display="none"; 
} 
</script> 
</head> 
<body onload="document.getElementById('tip').style.height='0px'"> 
<div id="shadow"> </div> 
<div id="detail"> 
</div> 
<div id="tip"><h1><a href="javascript:void(0)" onclick="start()">×</a>您有新消息</h1><p><a href="javascript:void(0)" onclick="showwin()">点击这里查看详细</a></p></div> </body> 
</html> 
<script language="JavaScript"> 
window.attachEvent("onload", myTimer); //绑定到onload事件 
function myTimer() { 
start(); 
window.setTimeout("myTimer()",6000);//设置循环时间 
} 
</script>
Javascript 相关文章推荐
Javascript 继承实现例子
Aug 12 Javascript
Iframe 自适应高度并实时监控高度变化的js代码
Oct 30 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
IE的fireEvent方法概述及应用
Feb 22 Javascript
javascript级联下拉列表实例代码(自写)
May 10 Javascript
jQuery实现tab标签自动切换的方法
Feb 28 Javascript
纯javascript移动优先的幻灯片效果
Nov 02 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 Javascript
jQuery深拷贝Json对象简单示例
Jul 06 Javascript
Centos7 中安装 Node.js v4.4.4
Nov 03 Javascript
jQuery DateTimePicker 日期和时间插件示例
Jan 22 Javascript
canvas的神奇用法
Feb 03 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 #Javascript
js获取location.href的参数实例代码
Aug 02 #Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
Aug 02 #Javascript
把jquery 的dialog和ztree结合实现步骤
Aug 02 #Javascript
jquery的相对父元素和相对文档定位示例代码
Aug 02 #Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
Aug 02 #Javascript
JS 获取select(多选下拉)中所选值的示例代码
Aug 02 #Javascript
You might like
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
关于php操作mysql执行数据库查询的一些常用操作汇总
2013/06/24 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
js判断变量是否未定义的代码
2020/03/28 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
基于MVC方式实现三级联动(JavaScript)
2017/01/23 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
实例讲解JavaScript 计时事件
2020/07/04 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
python如何操作mysql
2020/08/17 Python
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
英国在线发型和美容产品商店:Beauty Cutie
2019/04/27 全球购物
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
电信专业毕业生推荐信
2013/11/18 职场文书
春节联欢晚会主持词范文
2014/03/24 职场文书
中秋节主持词
2014/04/02 职场文书
幼儿园门卫岗位职责范本
2014/07/02 职场文书
乡镇消防安全责任书
2014/07/23 职场文书
收款委托书范本
2014/09/11 职场文书
2014年祖国生日寄语
2014/09/19 职场文书
综合素质评价思想道德自我评价
2015/03/09 职场文书
神秘岛读书笔记
2015/07/01 职场文书
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫