页面右下角弹出提示框示例代码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 相关文章推荐
jquery 合并内容相同的单元格(示例代码)
Dec 13 Javascript
jquery常用操作小结
Jul 21 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
JavaScript处理解析JSON数据过程详解
Sep 11 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
原生js实现打字动画游戏
Feb 04 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 Javascript
vue-cli3配置与跨域处理方法
Aug 17 Javascript
关于layui flow loading占位图的实现方法
Sep 21 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 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
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
php简单实现无限分类树形列表的方法
2015/03/27 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
PHP基于socket实现客户端和服务端通讯功能
2017/07/13 PHP
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
js对象基础实例分析
2015/01/13 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
2017/01/21 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
详解webpack es6 to es5支持配置
2017/05/04 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
vue父组件向子组件传递多个数据的实例
2018/03/01 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
详解vue 命名视图
2019/08/14 Javascript
利用js实现简易红绿灯
2020/10/15 Javascript
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
Python遍历指定文件及文件夹的方法
2015/05/09 Python
python用装饰器自动注册Tornado路由详解
2017/02/14 Python
python实现用户答题功能
2018/01/17 Python
selenium+python自动化测试之鼠标和键盘事件
2019/01/23 Python
pytorch 模型可视化的例子
2019/08/17 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
教师校本培训方案
2014/02/26 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
保安2014年终工作总结
2014/12/06 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书