通知 弹框

弹框 整个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>

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

时间： 2024-10-08 02:22:54

通知 弹框的相关文章

layer弹框的上面各个属性 －可配置

<script type="text/javascript"> 12 //eg 13 layer.open({ 14 title:"标题信息提示",//标题信息 15 content: 'test',//内容区域 16 move: false,//是否可以拖动,默认可以拖动 17 btn: ['按钮一', '按钮二', '按钮三'], 18 btn1: function(index){ 19 //按钮[按钮一]的回调 20 layer.close(ind

js弹框3秒后自动消失

开发中有时候会需要最出弹框后,过几秒自动消失的效果,下面给大家分享一下我自己做的一个小案例. 案例中的弹框使用的是bootstrap里面的模态框,实现自动消失则用的是js中的setInterval方法.该弹框使用了jquery-ui中的draggable方法,可拖动. 目录结构如下: 下面是案例代码: demo.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti

弹框提示用户输入

在很多页面,都会有提示用户输入账号和密码的弹框.并保障用户的良好体验效果. <html>   <head>   <title></title>   <meta http-equiv="content" content="text/html" charset="utf-8"/>   <style type="text/css">   body{   back

3种常用IOS弹框

目前为止,已经知道3种IOS弹框: 1.系统弹框-底部弹框 UIActionSheet (1)用法:处理用户非常危险的操作,比如注销系统等 (2)举例: UIActionSheet *sheet = [[UIActionSheet alloc] initWithTitle:@"确定要注销?" delegate:self cancelButtonTitle:@"取消" destructiveButtonTitle:@"确定" otherButton

android如果给TextView或EditText的email链接加下划线，并在点击在email连接上可以弹框显示

如何把textview的一些文字加上背景色: Spannable str = new SpannableString("#fdsfdfsdfdsfd#"); Matcher matcher = getEmailPattern().matcher((CharSequence) str); while (matcher.find()) { int start = matcher.start(); int end = matcher.end(); str.setSpan(new Foregr

未加域客户端使用Lync时反复弹框要求输入凭证

最近发现部分未加域客户端打开Lync 2010时反复弹框要求输入凭证,且提示与Exchange进行连接时凭证错误,此时感觉问题原因因该是发生在两端客户端信息不匹配导致的,此时在Lync客户端帐号登录处输入完整域帐号(帐号@域名)后,并记住密码后无任何报错信息,且退出重新登录也不再提示,outlook相关日历信息也得到了正常同步. 未加域客户端使用Lync时反复弹框要求输入凭证,布布扣,bubuko.com

如果exclipe中Java视图中Consol跑偏了单独形成一个弹框怎么办？

问题如图: 不和其他的在同一窗体中,而且拖动也拖不进去,则是使用以下方法: 点击工具栏上的Window--->点击Reset Perspective...这样就可以解决了. 如果exclipe中Java视图中Consol跑偏了单独形成一个弹框怎么办?,布布扣,bubuko.com

vue弹框，删除元素

1.效果 2.index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"> <title>Ti

Jquery学习笔记（8）--京东导航菜单（2）增加弹框

京东导航,添加中间的弹框栏,使用position定位,放在左侧栏的li标签里面,成为一个整体,保证鼠标在弹框里的时候,弹框不消失: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="jquery.js&quo