JSP頁面右下角訊息彈框的實現_

JSP頁面右下角訊息彈框的實現__JSP

最後更新：2018-07-20 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

JSP頁面上通過JS實現訊息彈出框，樣式可根據要求修改，這邊只是一個簡單的示範例子，自訂了兩條訊息，彈框效果如下

JSP頁面

<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%><%@page import="java.util.*"%><html>  <head><style type="text/css">#winpop { width:250px; height:0px; position:absolute; right:0; bottom:0; border:1px solid grey; margin:0; padding:1px; overflow:hidden; display:none; background:#FFFFFF}#winpop .title { width:100%; height:20px; line-height:20px; background:#0AB0FF ; font-weight:bold; text-align:center; font-size:12px;color:white}#winpop .con { width:100%; height:360px; line-height:80px; font-weight:bold; font-size:12px; color:#FF0000; text-decoration:underline; text-align:center}.close { position:absolute; right:4px; top:-1px; color:#FFFFFF; cursor:pointer}</style>  </head><%         //未讀訊息unreadList根據實際情況取    List<Map> unreadList = new ArrayList<Map>();Map<String,String> map1=new HashMap<String,String>();map1.put("msgId","1");map1.put("msgContent","message111111");unreadList.add(map1);Map<String,String> map2=new HashMap<String,String>();map2.put("msgId","2");map2.put("msgContent","message222222");unreadList.add(map2);    int num=unreadList.size();%>  <body>    <script language="javascript" type="text/javascript">window.onload = function tanchuang() { //載入document.getElementById('winpop').style.height = '0px';//要初始化這個高度,雖然CSS裡已經初始化了setTimeout("tips_pop()",0); //調用tips_pop()這個函數}function tips_pop() {var MsgPop = document.getElementById("winpop");//擷取視窗這個對象,即ID為winpop的對象var popH = parseInt(MsgPop.style.height);//用parseInt將對象的高度轉化為數字,以方便下面比較if (popH == 0) { //如果視窗的高度是0MsgPop.style.display = "block";//那麼將隱藏的視窗顯示出來show = setInterval("changeH('up')", 2);//開始以每0.002秒調用函數changeH("up"),即每0.002秒向上移動一次} else { //否則hide = setInterval("changeH('down')", 2);//開始以每0.002秒調用函數changeH("down"),即每0.002秒向下移動一次}}function changeH(str) {var MsgPop = document.getElementById("winpop");var popH = parseInt(MsgPop.style.height);if (str == "up") { //如果這個參數是UPif (popH <= 100) { //如果轉化為數值的高度小於等於100MsgPop.style.height = (popH + 4).toString() + "px";//高度增加4個象素} else {clearInterval(show);//否則就取消這個函數調用,意思就是如果高度超過100象度了,就不再增長了}}if (str == "down") {if (popH >= 4) { //如果這個參數是downMsgPop.style.height = (popH - 4).toString() + "px";//那麼視窗的高度減少4個象素} else { //否則clearInterval(hide); //否則就取消這個函數調用,意思就是如果高度小於4個象度的時候,就不再減了MsgPop.style.display = "none"; //因為視窗有邊框,所以還是可以看見1~2象素沒縮排去,這時候就把DIV隱藏掉}}}</script><%if(num>0){ %><div id="winpop"><div class="title" >系統資訊<br>共有<font color="red"><big><%=num %></big></font>條未讀訊息<span class="close" onclick="tips_pop()">X</span></div><%for(int i=0;i<num;i++) { %><!-- 點擊資訊標題連結到資訊明細，傳遞資訊編號參數 -->      <a href="/XXXAction.do?msgId=<%=unreadList.get(i).get("msgId") %>"><%if(String.valueOf(unreadList.get(i).get("msgContent")).length()>16) {%><%=String.valueOf(unreadList.get(i).get("msgContent")).substring(0,16)+"..." %><%} else{ %><%=String.valueOf(unreadList.get(i).get("msgContent")) %><%} %>  </a><br><%if(i>=1){//最多顯示兩條break;}} %><center><!-- 點擊查看更多未讀訊息 --><a href="/XXXAction.do %>"><font color="red">更多未讀訊息...</font></a></center></div><%} %>  </body></html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More