web 后台管理 消息弹窗实现

做网站后台管理保存消息或者删除数据,完成操作时能够给用户一个很好的信息提示:操作成功或者操作失败等等,,,
说明:
**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,消息弹窗)