Web页面右下角弹出窗口示例代码

来源：互联网发布：广州软件测试培训编辑：程序博客网时间：2024/04/28 11:49
我们一般会遇到这种情况，当登录首页后，会有消息提示机制，本例子中讲的就是在首页登陆后在页面的右下角弹出消息提示框
先看效果图：
jsp代码：
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@taglib  prefix="s" uri="/struts-tags"  %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>系统登陆后，提示消息</title><script type="text/javascript" src="<%=path%>/common/js/jquery-1.4.2.js"></script><style type="text/css">#winpop { width:150px; height:80px; position:absolute; right:0; bottom:0; border:1px solid #999999; margin:0; padding:1px; overflow:hidden; display:none; background:#CED6E1;}#winpop .title { width:100%; height:20px; line-height:20px; background:#677281; font-weight:bold; text-align:center; font-size:12px;}#winpop .con { width:100%; /* height:80px; */ line-height:80px; font-weight:bold; font-size:12px; color:bleck; text-align:center; background:#CED6E1;}.close { position:absolute; right:4px; top:-1px; color:#FF3333; cursor:pointer}</style> <script type="text/javascript">var hide;function tips_pop(){     //var orders=value;　这样取的值value就是从数据库中抓出来的值 //var orders='O2008090731;O2008090732;O2008090733;O2008090734;O2008090735;O2008090736'; //view(orders); var MsgPop=document.getElementById("winpop");//获取窗口这个对象,即ID为winpop的对象 var popH=parseInt(MsgPop.style.height);//用parseInt将对象的高度转化为数字,以方便下面比较 if(popH==0){//如果窗口的高度是0      MsgPop.style.display="block";//那么将隐藏的窗口显示出来      hide=setInterval("changeH('up')",50);//开始以每0.002秒调用函数changeH("up"),即每0.05秒向上移动一次 } else{//否则     hide=setInterval("changeH('down')",50);//开始以每0.002秒调用函数changeH("down"),即每0.05秒向下移动一次 }}function changeH(str){ var MsgPop=document.getElementById("winpop");var popH=parseInt(MsgPop.style.height);if(str=="up"){//如果这个参数是UP    if (popH<=160){//如果转化为数值的高度小于等于100        MsgPop.style.height=(popH+8).toString()+"px";//高度增加4个象素    }    else{          clearInterval(hide);//否则就取消这个函数调用,意思就是如果高度超过160象度了,就不再增长了    }}if(str=="down"){     if (popH>=8){        //如果这个参数是down    MsgPop.style.height=(popH-8).toString()+"px";//那么窗口的高度减少4个象素}    else{//否则    clearInterval(hide);//否则就取消这个函数调用,意思就是如果高度小于4个象度的时候,就不再减了    MsgPop.style.display="none";//因为窗口有边框,所以还是可以看见1~2象素没缩进去,这时候就把DIV隐藏掉    }}}window.onload=function(){ showMyMessage();}function showMyMessage(){     var hasNotice = hasNoticeNotRead();          if(hasNotice){         document.getElementById('winpop').style.height='0px';     setTimeout("tips_pop()",1000);//1秒后调用tips_pop()这个函数 setInterval     }else{             }}//系统登录，发送请求判断是否有未阅读消息function hasNoticeNotRead(){           var url = "<%=path%>/notice/noticeAction!hasNoticeNotRead.action";    var hasNotice = true;      $.ajax({        async: false,        type:'post',//请求方式：post        dataType:'json',//数据传输格式：json        url:url,        success:function(data){                    if(data=="0"){//无消息               hasNotice = false;            }        }            });          return hasNotice;       }var curCount = 10;//10秒之后关闭提示框var obj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次  function SetRemainTime() {       if (curCount == 0) {                          window.clearInterval(obj);//停止计时器          tips_pop();            }      else {          curCount--;      }  } //跳转到消息记录列表function goToNoticeList(){    //parent.frames["menuFrame"].document.getElementById("noticeListHref").click();    window.location.href = "<%=path%>/notice/noticeAction!QueryNoticeInteralList.action";    tips_pop();}function view(s) {   arry = s.split(";");var str = ""; for(i=0;i<arry.length;i++) {  str = str+"<tr><td><font size=2><a href='/项目名/noresolvedorder.do?method=noresolved&order_no="+arry[i]+"'>"+arry[i]+"</a></font></td></tr>";}document.all.myorder.innerHTML = "<table><tr><td><font size=2>未处理订单</font></td></tr>"+str+"</table>";}</script></head><body scroll=no><!--把下面代码加到<body>与</body>之间--><%-- <span onclick="tips_pop()" style="cursor:hand">查看信息</span> --%><div id="winpop"> <div class="title">温馨提示<span class="close" onclick="tips_pop()" title="关闭">x</span></div> <div class="con">您有未阅读消息， <a href="javascript:void(0);"  onclick="goToNoticeList()">查看</a></div> <!-- <div id="myorder" class="con">点击这里查看详细</div> --></div></body></html>
如果需要有多条消息，可以根据消息的ID显示消息的详细信息，那么就可以参考调用view()方法。这里就不演示了。
1 0