码迷,mamicode.com
首页 > 其他好文 > 详细

通知 弹框

时间:2019-12-06 09:30:10      阅读:76      评论:0      收藏:0      [点我收藏+]

标签:result   class   mes   enc   tom   filter   alert   tab   bottom   

弹框 整个jap 页面

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>main</title>
<base target="_self">
<link rel="stylesheet" type="text/css" href="skin/css/base.css" />
<link rel="stylesheet" type="text/css" href="skin/css/main.css" />
    <script type="application/javascript" src="${pageContext.request.contextPath}/static/js/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/date.js"></script>
    <script type="text/javascript">
        
        $(function () {
            $.ajax({
                type:"GET",
                url:"/notice/jsonList",
                success:function (result) {
                if (result.map.statusCode==200){
                    $(result.map.list).each(function (index,item) {
                        var li=" <li class=‘ue-clear‘>"
                                +"<span>"+parseDate(item.ndate)+"</span>&nbsp;&nbsp;&nbsp;<a onclick=‘showWindow("+item.nid+")‘ href=‘#‘class=‘notice-title‘>"+item.ntitle+"</a>"
                                +"</li><p>";
                        $("#notice-ul").append(li);
                    });
                  }else {
                    $("#notice-ul").html("暂无数据");
                }
                }
            });
        });
        function showWindow(nid) {
            // alert(nid)  根据id然后发送ajax请求 获取这条内容 进行 弹窗,遮罩
             $.ajax({
              type:"GET",
              url:"${pageContext.request.contextPath}/notice/detail/"+nid,
                success:function (msg) {
                    if(msg.map.statusCode == 200){
                        $("#ntitle").text( msg.map.notice.ntitle);  //显示标题
                        $("#content").css({"font-size":10+"px"});
                        $("#content").text(msg.map.notice.remark);   //显示内容
                        //显示弹窗
                        $("#showdiv").show();
                        //显示遮罩
                        $("#cover").css({"display":"block","height":window.screen.availHeight+"px"});
                        $("#cover").show();
                    }
                }
            });
        }
    </script>
</head>
<body leftmargin="8" topmargin=‘8‘>

<!-- 遮罩层 -->
<div id="cover" style="background: #000; position: absolute; left: 0px; top: 0px; width: 100%; filter: alpha(opacity=30); opacity: 0.3; display: none; z-index: 2 ">

</div>
<!-- 弹窗 -->
<div id="showdiv" style="width: 60%; margin: 0 auto; height:500px; border: 1px solid #999; display: none; position: absolute; top: 20%; left: 20%; z-index: 3; background: #fff">
    <!-- 标题 -->
    <div id="ntitle" style="background: #F8F7F7; width: 100%; height: 2rem; font-size: 0.65rem; line-height: 2rem; border: 1px solid #999; text-align: center;" >

    </div>
    <!-- 内容 -->
    <div id="content" style="text-indent: 50px; height: 4rem; font-size: 0.5rem; padding: 0.5rem; line-height: 1rem; ">

    </div>
    <!-- 按钮 -->
    <div style="background: green; width: 10%; margin: 0 auto; height: 1.5rem; line-height: 1.5rem; text-align: center;color: #fff;margin-top: 28rem; -moz-border-radius: .128rem; -webkit-border-radius: .128rem; border-radius: .128rem;font-size: .59733rem;" onclick="closeWindow()">
        关闭
    </div>
</div>
    <table width="98%" border="0" align="center" cellpadding="0"
        cellspacing="0">
        <tr>
            <td><div style=‘float: left‘>
                    <img height="14" src="skin/images/frame/book1.gif" width="20" />&nbsp;欢迎使用项目平台管理系统
                </div>
                <div style=‘float: right; padding-right: 8px;‘>
                    <!--  //保留接口  -->
                </div></td>
        </tr>
        <tr>
            <td height="1" background="skin/images/frame/sp_bg.gif"
                style=‘padding: 0px‘></td>
        </tr>
    </table>

    <table width="98%" align="center" border="0" cellpadding="4"
        cellspacing="1" bgcolor="#CBD8AC" style="margin-bottom: 8px">
        <tr>
            <td colspan="2" background="skin/images/frame/wbg.gif"
                bgcolor="#EEF4EA" class=‘title‘>
                <div style=‘float: left‘>
                    <span>快捷操作</span>
                </div>
                <div style=‘float: right; padding-right: 10px;‘></div>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td height="30" colspan="2" align="center" valign="bottom"><table
                    width="100%" border="0" cellspacing="1" cellpadding="1">
                    <tr>
                        <td width="15%" height="31" align="center"><img
                            src="skin/images/frame/qc.gif" width="90" height="30" /></td>
                        <td width="85%" valign="bottom"><div class=‘icoitem‘>
                                <div class=‘ico‘>
                                    <img src=‘skin/images/frame/addnews.gif‘ width=‘16‘ height=‘16‘ />
                                </div>
                                <div class=‘txt‘>
                                    <a href=‘project-base.html‘><u>查看项目信息</u></a>
                                </div>
                            </div>
                            <div class=‘icoitem‘>
                                <div class=‘ico‘>
                                    <img src=‘skin/images/frame/menuarrow.gif‘ width=‘16‘
                                        height=‘16‘ />
                                </div>
                                <div class=‘txt‘>
                                    <a href=‘task-my.html‘><u>查看任务</u></a>
                                </div>
                            </div>
                            <div class=‘icoitem‘>
                                <div class=‘ico‘>
                                    <img src=‘skin/images/frame/manage1.gif‘ width=‘16‘ height=‘16‘ />
                                </div>
                                <div class=‘txt‘>
                                    <a href=‘task-add.html‘><u>发布任务</u></a>
                                </div>
                            </div>
                            <div class=‘icoitem‘>
                                <div class=‘ico‘>
                                    <img src=‘skin/images/frame/file_dir.gif‘ width=‘16‘
                                        height=‘16‘ />
                                </div>
                                <div class=‘txt‘>
                                    <a href=‘message-give.html‘><u>收件箱</u></a>
                                </div>
                            </div>
                            <div class=‘icoitem‘>
                                <div class=‘ico‘>
                                    <img src=‘skin/images/frame/part-index.gif‘ width=‘16‘
                                        height=‘16‘ />
                                </div>
                                <div class=‘txt‘>
                                    <a href=‘info.html‘><u>个人信息</u></a>
                                </div>
                            </div>
                            <div class=‘icoitem‘>
                                <div class=‘ico‘>
                                    <img src=‘skin/images/frame/manage1.gif‘ width=‘16‘ height=‘16‘ />
                                </div>
                                <div class=‘txt‘>
                                    <a href=‘modpassword.html‘><u>修改密码</u></a>
                                </div>
                            </div></td>
                    </tr>
                </table></td>
        </tr>
    </table>



    <table width="98%" align="center" border="0" cellpadding="3"
        cellspacing="1" bgcolor="#CBD8AC"
        style="margin-bottom: 8px; margin-top: 8px;">
        <tr>
            <td background="skin/images/frame/wbg.gif" bgcolor="#EEF4EA"
                class=‘title‘><span>待完成任务</span></td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td>您有<a href=""><font color="red">2</font></a>个任务未完成……&nbsp;
            </td>
        </tr>
    </table>



    <table width="98%" align="center" border="0" cellpadding="3"
        cellspacing="1" bgcolor="#CBD8AC"
        style="margin-bottom: 8px; margin-top: 8px;">
        <tr>
            <td background="skin/images/frame/wbg.gif" bgcolor="#EEF4EA"
                class=‘title‘><span>未读消息</span></td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td>您有<a href=""><font color="red">10</font></a>条未读消息……&nbsp;
            </td>
        </tr>
    </table>


    

    <table width="98%" align="center" border="0" cellpadding="3"
        cellspacing="1" bgcolor="#CBD8AC"
        style="margin-bottom: 8px; margin-top: 8px;">
        <tr>
            <td background="skin/images/frame/wbg.gif" bgcolor="#EEF4EA"
                class=‘title‘><span>通知公告</span></td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td>
                <ul class="notice-list" id="notice-ul">
<%--                    <li class="ue-clear">--%>
<%--                    <span>12-15</span>&nbsp;&nbsp;&nbsp;<a href="#"class="notice-title">中国移动关于设立作风建设监督举报电话的公告</a>    --%>
<%--                    </li><p>--%>

                </ul>
            </td>
        </tr>
    </table>

    <table width="98%" align="center" border="0" cellpadding="3"
        cellspacing="1" bgcolor="#CBD8AC"
        style="margin-bottom: 8px; margin-top: 8px;">
        <tr>
            <td background="skin/images/frame/wbg.gif" bgcolor="#EEF4EA"
                class=‘title‘><span>员工论坛</span></td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td>
                <ul class="notice-list">
                    <li class="ue-clear">
                         <span><img src="${pageContext.request.contextPath}/images/tx.png" height="50px" width="50px"/></span> 发布时间:2018-12-25
                         <a href="role.jsp"class="notice-title">招租信息</a>                        
                    </li>
                    <p>
                    <li class="ue-clear">
                         <span><img src="${pageContext.request.contextPath}/images/tx.png" height="50px" width="50px"/></span> 发布时间:2018-12-25
                         <a href="role.jsp"class="notice-title">招租信息</a>                        
                    </li>
                    <p>
                    <li class="ue-clear">
                         <span><img src="${pageContext.request.contextPath}/images/tx.png" height="50px" width="50px"/></span> 发布时间:2018-12-25
                         <a href="role.jsp"class="notice-title">招租信息</a>                        
                    </li>
                    <p>
                    <li class="ue-clear">
                         <span><img src="${pageContext.request.contextPath}/images/tx.png" height="50px" width="50px"/></span> 发布时间:2018-12-25
                         <a href="role.jsp"class="notice-title">招租信息</a>                        
                    </li>
                </ul>
            </td>
        </tr>
    </table>

</body>
</html>

 

通知 弹框

标签:result   class   mes   enc   tom   filter   alert   tab   bottom   

原文地址:https://www.cnblogs.com/ych961107/p/11992977.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!