JSP在页面右下角实现消息弹出框

在JSP页面上通过JS实现消息弹出框，样式可以根据需要修改。这只是一个简单的演示例子。定制了两条消息，弹出效果如下

JSP页面

“% @”页面语言=“Java”导入=“Java”。乌提尔。*“页面编码=”GB 2312“% % @页面导入=”Java。乌提尔。* % html头部样式类型=' text/CSS ' # winpop { width :250 px；高度：0像素位置：绝对；右：0底部：0;border:1px纯灰色；边距margin:0padding:1px飞越：隐藏；display : none background : # FFFFFF } # winpop .标题{宽度：100%；高度：20 px线高：20 px背景# 0AB0FFfont-weight :粗体；文本对齐：居中；font-size :12 pxcolor:white} #winpop .con { width :100%；高度：360 px线高：80 px字体粗细：加粗；font-size :12 px颜色： # FF0000文本修饰：下划线；文本对齐：居中}。关闭{ position : absolute eright :4 xtop :-1px；color: # FFFFFFcursor :指针}/样式/标题%//未读消息取消列表根据实际情况取ListMap UnReadList=new arrayListMap()；MapString，String map1=new HashMapString，String()；map1.put('msgId '，' 1 ')；map1.put('msgContent '，' message 111111 ')；取消列表。添加(地图1)；MapString，String map2=new HashMapString，String()；map2.put('msgId '，' 2 ')；map2.put('msgContent '，' message 222222 ')；取消列表。添加(地图2)；int num=UnReadList。size()；% body script language=' JavaScript ' type=' text/JavaScript ' window。onload=function tanchong(){//加载文件。getelementbyid(' winpop ')。风格。高度=' 0px//要初始化这个高度，虽然半铸钢钢性铸铁(铸造半钢)里已经初始化了setTimeout('tips_pop()'，0)；//调用tips_pop()这个函数} function tips _ pop(){ var MsgPop=document。getelementbyid(' winpop ')；//获取窗口这个对象，即身份为winpop的对象var popH=ParSeint(MSgpop。风格。高度)；//用parseInt将对象的高度转化为数字，以方便下面比较if (popH==0) { //如果窗口的高度是0 MSgpop。风格。display=' block//那么将隐藏的窗口显示出来show=setInterval('changeH('up ')'，2)；//开始以每0.002秒调用函数变更('向上'),即每0.002秒向上移动一次} else { //否则hide=setInterval(' changeH(' down ')'，2)；//开始以每0.002秒调用函数变更('向下'),即每0.002秒向下移动一次} } function changeH(str){ var MsgPop=document。getelementbyid(' winpop ')；var popH=ParSeint(MSgpop。风格。高度)；if (str=='up') { //如果这个参数是向上if (popH=100) { //如果转化为数值的高度小于等于100 MsgPop.style.height=(popH 4).toString()" px "；//高度增加四个象素} else { clearInterval(show)；//否则就取消这个函数调用，意思就是如果高度超过100象度了，就不再增长了} } if(str==' down '){ if(PopH=4){//如果这个参数是关闭MSgpop。风格。高度=(popH-4).toString()" px "；//那么窗口的高度减少四个象素} else { //否则clearInterval(隐藏);//否则就取消这个函数调用，意思就是如果高度小于四个象度的时候，就不再减了msgpop。风格。display=" none//因为窗口有边框，所以还是可以看见1~2象素没缩进去，这时候就把差异隐藏掉} } }/script % if(num0){ % div id=' winpop ' div class=' title '系统信息英国铁路公司共有font color=' red ' big %=num %/big/font条未读消息span class=' close 'n click=' tips _ pop()' X/span/div % for(int I=0；因纽姆；i ) { %！-点击信息标题链接到信息明细，传递信息编号参数- a href='/XXXAction.do？msgId=%=unreadList.get(i).get(' MSGid ')% ' % if(String。Valueof(UnReadList。得到(我).get('msgContent ').length()(16){ % %=String。Valueof(UnReadList。得到(我).get('msgContent ').子字符串(0,16).% % } else { % %=String。Valueof(UnReadList。得到(我).get(' MSgcontent ')% % } %/ABR % if(I=1){//最多显示两条打破；} } % center！-点击查看更多未读消息-a href='/xxxaction。do % ' font color=' red '更多未读消息./font/a/center/div % } %/body/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。