BinaryDevelop
  1. ホーム
  2. Web プログラミング
  3. JSP プログラミング

ページメッセージのポップアップボックスの右下を実現するJSP

2022-01-16 22:15:10

メッセージのポップアップボックスのJS実装を介してJSPページ、スタイルは、要件に応じて変更することができ、これは単に単純なデモ例、カスタム2メッセージは、ポップアップボックスの効果は次のとおりです。

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>
<% 
 // Unread messages unreadList is taken as appropriate
 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() { //load
 document.getElementById('winpop').style.height = '0px';//to initialize this height, although it has been initialized in CSS
 
 setTimeout("tips_pop()",0); //call the function tips_pop()
 }
 
 function tips_pop() {
 var MsgPop = document.getElementById("winpop");//get the window object, that is, the object with the ID winpop
 var popH = parseInt(MsgPop.style.height);//use parseInt to convert the height of the object into a number, in order to facilitate the following comparison
 
 if (popH == 0) { //If the height of the window is 0
 MsgPop.style.display = "block";//then the hidden window will be shown
 show = setInterval("changeH('up')", 2);//start calling the function changeH("up") every 0.002 seconds, i.e. every 0.002 seconds to move up
 } else { //otherwise
 hide = setInterval("changeH('down')", 2);//start calling the function changeH("down") every 0.002 seconds, that is, every 0.002 seconds to move down
 }
 }
 function changeH(str) {
 var MsgPop = document.getElementById("winpop");
 var popH = parseInt(MsgPop.style.height);
 if (str == "up") { //if this parameter is UP
 if (popH <= 100) { //if the height converted to a value is less than or equal to 100
 MsgPop.style.height = (popH + 4).toString() + "px";//height is increased by 4 pixels
 } else {
 clearInterval(show);//or else cancel this function call, meaning that if the height exceeds 100 pixels, it won't grow anymore
 }
 }
 if (str == "down") {
 if (popH >= 4) { //if this parameter is down
 MsgPop.style.height = (popH - 4).toString() + "px";//then the height of the window is reduced by 4 pixels
 } else { //otherwise
 clearInterval(hide); //or else cancel this function call, meaning that if the height is less than 4 pixels, it will no longer be reduced
 MsgPop.style.display = "none"; //because the window has a border, so you can still see 1~2 pixels not indented, then the DIV will be hidden
 }
 }
 }
 </script>
 
 <%if(num>0){ %>
 <div id="winpop">
 <div class="title" >System info<br>
 There are <font color="red"><big><%=num %></big></font>unread messages
 <span class="close" οnclick="tips_pop()">X</span></div>
 <%for(int i=0;i<num;i++) { %>
 <! -- Click on the message title to link to the message detail, passing the message number parameter -- >
 <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){//Display up to two
 break;
 }
 } %>
 <center>
 <! -- Click for more unread messages -->
 <a href="/XXXAction.do %>" ><font color="red">More unread messages... </font></a></center>
 </div>
 <%} %>
 </body>
</html>

以上、本記事の全内容をご紹介しましたが、皆様の学習のお役に立てれば幸いです。また、Script Houseをより一層応援していただければ幸いです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します