页面右下角弹出提示框示例代码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>