页面右下角弹出提示框示例代码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系列之数据类型 字符串
Jun 08 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
对称加密与非对称加密优缺点详解
Feb 06 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
使用Angular Cli如何创建Angular私有库详解
Jan 30 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 Javascript
vue实现路由懒加载的3种方法示例
Sep 01 Javascript
小程序实现左滑删除的效果的实例代码
Oct 19 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
PHP自动生成月历代码
2006/10/09 PHP
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
JS 建立对象的方法
2007/04/21 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
js预加载图片方法汇总
2015/06/15 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
jq checkbox 的全选并ajax传参的实例
2017/04/01 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
微信小程序使用车牌号输入法的示例代码
2019/08/20 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python迭代器与生成器详解
2016/03/10 Python
Python人脸识别初探
2017/12/21 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
Python实现朴素贝叶斯的学习与分类过程解析
2019/08/24 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
Python 实现集合Set的示例
2020/12/21 Python
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
阿拉伯世界最大的电子卖场:Souq埃及
2016/08/01 全球购物
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
Myprotein荷兰官网:欧洲第一运动营养品牌
2020/07/11 全球购物
酒店财务经理岗位职责
2015/04/08 职场文书
工会经费申请报告
2015/05/15 职场文书
一文读懂go中semaphore(信号量)源码
2021/04/03 Golang
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python