自制右下角弹窗

最新推荐文章于 2024-03-11 09:39:19 发布

fantasy1713

最新推荐文章于 2024-03-11 09:39:19 发布

阅读量769

点赞数

分类专栏： js笔记错误解决 html笔记 struts笔记编程学习

本文链接：https://blog.csdn.net/u010115177/article/details/44526279

版权

js笔记同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

编程学习

6 篇文章 0 订阅

订阅专栏

错误解决

4 篇文章 0 订阅

订阅专栏

做一个管理型的网站，及时给用户进行操作提示以及用户操作结果提示是非常重要的。

这样做原因A，可以帮助用户熟悉使用该管理系统，B让用户知道当前操作的结果，方便下一步操作，C如果操作出错，或者系统出错，用户可以尽早发现。

一个系统网站，需要有统一的界面风格，对于提示框也不例外。最简单的就是用js写个alert();，但是这样显得特别敷衍，也没能体现特色。

因此我想自己实现一个提示窗口。

第一个闪过的念头就是右下角的弹出窗，稍作思考，我便开始动手。因为有很多个页面需要有这样一个弹出提示，所以我打算把弹出框的内容分离到一个独立的js文件中，哪个页面需要弹出提示，直接引用这个js文件就行了。

tipmess.js:

//构建页面右下角提示框
$(function(){
	var tipbox="<div id='tipbox'><div id='tip_title'></div><div id='tip_mess'></div> </div>";
	$("body").append(tipbox);
	$("#tipbox").css({position: "absolute",right: "0px", bottom: "0px", height: "160px",width:"240px", border: "1px solid #CCCCCC", backgroundColor: "white", padding: "2px", overflow: "hidden", display: "none" ,fontSize: "12px", zIndex: "12"});
	$("#tip_title").css({fontSize:"200%", backgroundColor:"#3287D6",width:"100%",height:"30px",lineHeight :"30px"});
	
});

function setSize($node,height,width){
	$node.css("height",height);
	$node.css("width",width);
}
function showTips(title,message,time){
	var ishide=true;
	if(typeof time=="undefined"){
		time=2000;// default 2s.
	}
	$("#tip_title").text(title);
	$("#tipbox #tip_mess").text(message);
	$("#tipbox").slideDown("slow");
	ishide=false;
	var timeout =setTimeout(function(){
		if(!ishide){
			$("#tipbox").slideUp("slow");
			idhide=true;
		}
	},time);	
}

当页面加载完后，tipmess.js中的函数将会把弹出框拼出来，并append到页面<body>中。

在页面中只需要一路tipmess.js文件和jquery.js

<script type="text/javascript" src="./js/jquery.js"></script>

<script type="text/javascript" src="./js/tipmess.js"></script>

最后，在需要的地方调用showTips(title,message,time);方法即可。

另一个问题：

由于我的系统是使用struts2做的，页面跳转通过action的返回值映射到不同的视图。

现在有这样一个需求，action处理完一个请求，返回success对应的视图，并且想把处理结果提示信息tips="添加成功"通过上述的提示框提示给用户。由于js不能直接得到struts值栈中的值，所以不能直接通过js得到提示信息。

以下是解决方法：

因为在jsp页面中可以通过struts标签+OGNL表达式获知EL表达式来得到值栈中的数据，因此可以在success对应的视图，即将要跳转到的jsp中加入：

<script type="text/javascript">
var tips = "<s:property value='#request.tips'/>";
$(function(){
	if(tips!=""){
		showTips("提示",tips,2000);
	}
});
</script>

并且在action中加入：

request.setAttribute("tips","新系添加成功");

这样一来，在jsp编译成普通html发送个客户浏览器前，上面一段js脚本中的var tips已经被赋值，如果tips有值的话，在页面加载完毕后，showTips()就会被调用，弹出框就会弹出。否则弹出框不会弹出。

fantasy1713

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自制右下角弹窗

做一个管理型的网站，及时给用户进行操作提示以及用户操作结果提示是非常重要的。这样做原因A，可以帮助用户熟悉使用该管理系统，B让用户知道当前操作的结果，方便下一步操作，C如果操作出错，或者系统出错，用户可以尽早发现。一个系统网站，需要有统一的界面风格，对于提示框也不例外。最简单的就是用js写个alert();，但是这样显得特别敷衍，也没能体现特色。因此我想自己实现一个提示窗口。第一个
复制链接

扫一扫