页面右下角弹出提示框示例代码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 相关文章推荐
JS 无限级 Select效果实现代码(json格式)
Aug 30 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
Oct 10 Javascript
JavaScript数组实现数据结构中的队列与堆栈
May 26 Javascript
jQuery+ajax的资源回收处理机制分析
Jan 07 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 Javascript
angularJs利用$scope处理升降序的方法
Oct 08 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
vue组件化中slot的基本使用方法
May 01 Javascript
简述ES6新增关键字let与var的区别
Aug 23 Javascript
小程序实现图片预览裁剪插件
Nov 22 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
Apr 22 Javascript
详解JavaScript中的this指向问题
Feb 05 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可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
PHP获取163、gmail、126等邮箱联系人地址【已测试2009.10.10】
2009/10/11 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
php+MySQL判断update语句是否执行成功的方法
2014/08/28 PHP
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
过虑特殊字符输入的js代码
2010/08/05 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
PHP abstract与interface之间的区别
2013/11/11 Javascript
express的中间件basicAuth详解
2014/12/04 Javascript
基于jQuery实现的无刷新表格分页实例
2016/02/17 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
javascript中数组的常用算法深入分析
2019/03/12 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
Python实现图像几何变换
2015/07/06 Python
基于python3 OpenCV3实现静态图片人脸识别
2018/05/25 Python
Python返回数组/List长度的实例
2018/06/23 Python
python 单线程和异步协程工作方式解析
2019/09/28 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
英国二手物品交易网站:Preloved
2017/10/06 全球购物
Android面试题及答案
2015/09/04 面试题
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
演讲主持词
2014/03/18 职场文书
学习走群众路线心得体会
2014/11/05 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫
Ubuntu18.04下QT开发Android无法连接设备问题解决实现
2022/06/01 Java/Android