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

代码如下:

<%@ 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>

赞 (0)

相关推荐

  • JS延时器提示框的应用实例代码解析

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>延时显示提示框</title> <style> #div1 { float: left; width: 60px; height: 60px; background-color: aqua;

  • JS实现定时页面弹出类似QQ新闻的提示框

    还是在做联通IOM项目时遇到的一个需求,要求页面每隔半小时弹出一次提示消息(消息以类似QQ新闻的形式弹出).当时上网找的这么一个资料,已经不记得原文出处了 复制代码 代码如下: <html> <head> <title>JavaScript提示框</title> <script type="text/javascript"> <!-- /** * 类名:CLASS_MSN_MESSAGE * 功能:提供类似MSN消息框

  • JS实现定时自动关闭DIV层提示框的方法

    本文实例讲述了JS实现定时自动关闭DIV层提示框的方法.分享给大家供大家参考.具体分析如下: 这里用JS设定时间去控制指定ID的DIV层是否显示,可以实现一个自动关闭的提示框,时间一到,马上关闭,这样会使你的网页更人性一点,代码其实比你想像的还要简单,就一行代码. <title>自动关闭的DIV层</title> <body onLoad=setTimeout("abc.style.display='none'",5000)> <div id=

  • javascript tips提示框组件实现代码

    tip.js 复制代码 代码如下: function tips(obj,tag){ var tip = document.createElement('div'),arg= arguments[2],left,top; //创建tipbox var bodywid= document.documentElement.clientWidth; //这里也可以替换为容器的宽度$(id).outerWidth(); var abs = obj.getElementsByTagName(tag); ti

  • javascript 实用的文字链提示框效果

    效果要基本实现以下功能: (1)鼠标滑过文章中的链接文字,要在相应位置弹出提示框,提示框的样式由css来控制,高度自适应:鼠标可以点击提示框的中的链接,滑离提示框时,框自动消失: (2)把提示框的位置控制在文本域范围之内,如果链接文字处在文本域左侧,提示框要居右显示,使其不会出离文本域:反之,如果链接文字处在文本域右侧,提示框要居左显示: (3)如果文本域内容很多,而链接文字恰巧处于浏览器底部,为了使提示框不出离于浏览器的可视范围,提示框的位置要自动调整到链接文字的上面: 1.css 复制代码

  • JS仿百度搜索自动提示框匹配查询功能

    1. 添加动态加载css文件 不需要引入css css全部在JS动态生成.2. 不需要额外的标签 只需要一个input输入框 并且默认指定一个class类名为 "inputElem" 当然也可以自己配置参数 还需要一个当前父级容器增加一个默认类名 parentCls(也可以自己配置),因为输入框匹配值后需要一个隐藏域 所以需要隐藏域增加一个class "hiddenCls" 当然也支持自己配置参数. 如下代码: 复制代码 代码如下: <div class=&q

  • javascript对话框使用方法(警告框 javascript确认框 提示框)

    1.警告框 警告框经常用于确保用户可以得到某些信息. 当警告框出现后,用户需要点击确定按钮才能继续进行操作. 语法: 复制代码 代码如下: alert("文本") 2.确认框 确认框用于使用户可以验证或者接受某些信息. 当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作. 如果用户点击确认,那么返回值为 true.如果用户点击取消,那么返回值为 false. 语法: 复制代码 代码如下: confirm("文本") 3.提示框 提示框经常用于提示用户在进入

  • javascript中常见的3种信息提示框(alert,prompt,confirm)

    1.警告提示框 alert("文本"). ex. function disp_alert() { alert("我是警告框!!"+'\n'+"hhah")//有折行 } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 2.确认提示框(confirm,返回true或者false) function show_confirm() { var r=confirm("Press a button!"); if (r==tr

  • 鼠标放上去触发一个javascript提示框效果代码

    感觉要连接没什么意义- 又不能点击 改这里 //s.appendChild(document.createTextNode(t)); 改动 s.innerHTML = t; function enableTooltips(id){ var links,i,h; if(!document.getElementById || !document.getElementsByTagName) return; h=document.createElement("span"); h.id=&quo

  • Js 订制自己的AlertBox(信息提示框)

    Js 订制自己的AlertBox(信息提示框)

    本文制作一个用户自定义的AlertBox,效果如图:js文件中插入如下代码: 复制代码 代码如下: // JScript 文件 // constants to define the title of the alert and button text. var ALERT_TITLE = "Oops!"; var ALERT_BUTTON_TEXT = "Close"; // over-ride the alert method only if this a new

随机推荐