您的位置：首页 > 其它

web 后台管理消息弹窗实现

2018-03-13 19:21 302 查看

做网站后台管理保存消息或者删除数据，完成操作时能够给用户一个很好的信息提示：操作成功或者操作失败等等，，，

说明：

**listInfo.action 展示方法完成之后跳转到展示信息主页

saveInfo.action 保存方法**

保存完成之后跳转到展示方法上，再跳转到展示主页。

**java后台：**

public String saveInfo(HttpServletRequest request,RedirectAttributes attr) {
if(操作成功){
attr.addFlashAttribute("message", "保存成功!");
}else{
attr.addFlashAttribute("message", "保存失败!");
}
return "redirect:/Info/listInfo.action";
}

***展示信息主页jsp：***
**js:**

<script>
$(function(){
$('.message_alert').show(300).delay(2500).hide(300);
})
</script>

**css:**

<style>
.message_alert {
position:absolute;
top: 30%;
left: 50%;
width: 20%;
text-align: center;
background: #3bb4f2;
opacity: 1;
z-index: 999;
padding: 5px 0;
color: white;
display: none;
}
</style>

<html>
<c:if test="${not empty message}">
<div class="message_alert">${message}</div>
</c:if>
</html>

子操作页面（例如：信息详情页面）的返回操作：

<button type="button" onclick="goBack()">返回</button>

js:

function goBack(){
window.location.href="${adminPath}/Info/listInfo.cation";
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： web 消息弹窗

相关文章推荐

新的分享

章节导航

web 后台管理 消息弹窗实现

web 后台管理消息弹窗实现