页面右下角弹出提示框示例代码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 相关文章推荐
window.js 主要包含了页面的一些操作
Dec 23 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
js简单实现HTML标签Select联动带跳转
Oct 23 Javascript
jQuery 实现侧边浮动导航菜单效果
Dec 26 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
微信小程序-消息提示框实例
Nov 24 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
微信小程序实现YDUI的ScrollNav组件
Feb 02 Javascript
vue的列表交错过渡实现代码示例
May 05 Javascript
微信小程序 弹窗输入组件的实现解析
Aug 12 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
Apr 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
php下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
深入PHP数据加密详解
2013/06/18 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
2016/12/09 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
Bootstrap基础学习
2015/06/16 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
详解Nodejs基于mongoose模块的增删改查的操作
2016/12/21 NodeJs
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
vant中的toast层级改变操作
2020/11/04 Javascript
推荐下python/ironpython:从入门到精通
2007/10/02 Python
python共享引用(多个变量引用)示例代码
2013/12/04 Python
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
python三方库之requests的快速上手
2019/03/04 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
2019年分享net面试的经历和题目
2016/08/07 面试题
使用C#编写创建一个线程的代码
2013/01/22 面试题
2015中学政教处工作总结
2015/07/22 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python
nginx lua 操作 mysql
2022/05/15 Servers