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

2024-10-20 18:23:34

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) { //如果窗口的高度是0
 MsgPop.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") { //如果这个参数是UP
 if (popH <= 100) { //如果转化为数值的高度小于等于100
  MsgPop.style.height = (popH + 4).toString() + "px";//高度增加4个象素
 } else {
  clearInterval(show);//否则就取消这个函数调用,意思就是如果高度超过100象度了,就不再增长了
 }
 }
 if (str == "down") {
 if (popH >= 4) { //如果这个参数是down
  MsgPop.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" οnclick="tips_pop()">X</span></div>
 <%for(int i=0;i<num;i++) { %>
 <!-- 点击信息标题链接到信息明细，传递信息编号参数 -->
  <a href="/XXXAction.do?msgId=<%=unreadList.get(i).get(" rel="external nofollow" 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 %>" rel="external nofollow" ><font color="red">更多未读消息...</font></a></center>
 </div>
 <%} %>
 </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

jsp中点击图片弹出文件上传界面及实现预览实例详解

jsp中点击图片弹出文件上传界面及实现预览实例详解花了两天时间琢磨一下图片预览的功能任务需求如下: 1:jsp页面中有一个图片(pic_1) 2:点击图片弹出类似于资源管理器的界面 3:选择完某一个图片之后在pic_1处预览我在IE8上试验下面这段代码,可以实现上述功能,没有在别的浏览器中测试,如果各位朋友知道多种浏览器的支持方法,请赐教,共同学习,谢谢. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&qu
JSP实现页面右下角消息弹框

JSP页面上通过JS实现消息弹出框,样式可根据要求修改,这边只是一个简单的示范例子,自定义了两条消息,弹框效果如下 JSP页面 <%@ page language="java" import="java.util.*" pageEncoding="gb2312"%> <%@page import="java.util.*"%> <html> <head> <style ty
JS消息弹框alert、confirm、prompt的实现代码

alert 消息提示框: 用于警告,只有确定按钮. alert(str); confirm 消息对话框: 通过返回值可以判断用户点击了什么按钮 . confirm(str); 当用户点击"确定"按钮时,返回true.当用户点击"取消"按钮时,返回false. prompt()消息输入框: 弹框中包含一个输入框和确认取消按钮,用户可以在输入框输入内容. var reason = window.prompt("请输入审核不通过理由:", "
通过vue.extend实现消息提示弹框的方法记录

前提回顾在项目开发中我们经常使用的组件注册分为两种,一个是全局注册和另一个是局部注册,假设我们的业务场景是用户在浏览注册页面时,点击页面中的注册按钮后,前端根据用户的注册信息先做一次简单的验证,并根据验证弹出一个对应消息提示弹框我们拿到这个需求后,便开始着手准备要通过局部注册消息弹框组件的方法来实现这个场景,在通过局部注册消息弹框组件的方法解决完这个需求后,自然是沾沾自喜,紧接着又迎来了一个需求,该需求是用户在点击该注册按钮时,点击几次就要出现几次这个消息弹框,你开始犯了难,并思考难道我要在
python自动化测试selenium核心技术处理弹框

页面上的弹框一般有三种: (1)alert:用来提示 (2)confirm:用来确认 (2)prompt:输入内容示例网站:http://sahitest.com/demo 示例场景:打开Sahi Tests页面, (1)点击"Alert Test"页面,鼠标点击页面中"Click For Alert"按钮,弹出警告提示框,判断页面是否存在alert,如存在则切换到警告框,并获取警告文本信息,之后点警告框中的确定按钮. (2)点击"Confirm Pag
JS实时弹出新消息提示框并有提示音响起的实现代码

在java web认证系统开发中,客户要求有数据更新时要在页面弹出提示框,这样方便在旁边的工作人员可以及时的知道有新数据提交了,我们除了使用及时的推送技术外还可以使用ajax来实现这些功能. 代码实现的原理,在页面启用定时执行ajax请求,如果获得数据是最新状态的,要执行语音提示和弹出框提示,这样实现的弊端是频繁的调用数据库,该方法只适合于使用人数较少的系统. 1.加入语音提示 <audio id="sound" autoplay="autoplay">
layui点击弹框页面表单请求的方法

如下所示: $("#addSite").click(function () { layer.open({ title: '添加站点', type: 1, area: ['700px', '400px'], content: '<blockquote class="layui-elem-quote layui-text">注意事项: 请填写相关的数据信息! </blockquote>' + '<form class="layui
jQuery实现消息弹出框效果

本文实例为大家分享了jQuery消息弹出框的具体代码,供大家参考,具体内容如下效果图实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">  <scrip
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例

本文实例讲述了JS实现的定时器展示简单秒表.页面弹框及跳转操作.分享给大家供大家参考,具体如下: 定时器展示简单秒表demo <!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/
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框

1.随机生成格式正确手机号码 # 随机产生格式正确的手机号码 def create_phone(self): num_start = ['134', '135', '136', '137', '138', '139', '150', '151', '152', '158', '159', '157', '182', '187', '188', '147', '130', '131', '132', '155', '156', '185', '186', '133', '153', '180',
关于使用pyqt弹出消息提示框的问题

目录安装 pyqt 安装遇到问题还有 To avoid this problem you can invoke Python with '-m pip' instead of running pip directly. 问题 Ubuntu 默认使用 Python2 更换默认配置为 Python3 测试验证创建一个基本的GUI应用各种样式的消息对话框示例 Python 程序打包安装 pyinstaller 显示 command not found 总结本文仅针对 Ubuntu 操作系统

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

相关推荐

随机推荐