遮罩层技术

最新推荐文章于 2024-04-10 14:28:35 发布

一方晴空

最新推荐文章于 2024-04-10 14:28:35 发布

阅读量1.2k

点赞数

文章标签： stylesheet border function filter login ajax

本文链接：https://blog.csdn.net/taoyuan0908/article/details/3466643

版权

以前在用迅雷，当我们点击电影分类的时候，它弹出来一个页面（实际上是个层）上面什么东西都有，我们仔细一看它后面的东西也还看得到，只不过被屏蔽了，那时候觉得这东西很有趣，就记下来了。

这次我在做人力资源管理薪酬查询的时候，我突然感觉以前的查询显示直接显示到其它页面或者用AJAX直接显示到本页面很老套了，于是我就用了遮罩层，结果使用的效果相当不错。

当然这是我们执行代码后的效果，但是我现在提过的只是一个纯页面代码，内容是后台输出的，包括分页。

下面是就是我将要贴出来的东西，运行的结果了。

那好我就先把CSS样式代码贴出来吧：

 
  .pagination{
padding: 2px;
}
.pagination ul{
margin: 0;
padding: 0;
text-align: right; /*Set to "right" to right align pagination interface*/
font-size: 12px;
}
.pagination li{
list-style-type: none;
display: inline;
padding-bottom: 1px;
}
.pagination a, .pagination a:visited{
padding: 0 5px;
border: 1px solid #9aafe5;
text-decoration: none; 
color: #2e6ab1;
}
.pagination a:hover, .pagination a:active{
border: 1px solid #2b66a5;
color: #000;
background-color: lightyellow;
}
.pagination li.currentpage{
font-weight: bold;
padding: 0 5px;
border: 1px solid navy;
background-color: #2e6ab1;
color: #FFF;
}
.pagination li.disablepage{
padding: 0 5px;
border: 1px solid #929292;
color: #929292;
}
.pagination li.nextpage{
font-weight: bold;
}
* html .pagination li.currentpage, * html .pagination li.disablepage{ /*IE 6 and below. Adjust non linked LIs slightly to account for bugs*/
margin-right: 5px;
padding-right: 0;
}
 
 

接下来就是HTML也面代码：

 
    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="css/css.css" />
<title>test</title>
<style type="text/css">
<!--
html {
    height: 100%;
}
body {
    margin: 0px;
    padding: 0px;
    height: 100%;
}
#query {
    cursor: pointer;
}
div#mbDIV {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #AAAAAA;
    z-index: 10;
    filter: alpha(opacity=65);
    opacity:0.6;
}
div#loginDIV {
    position: absolute;
    width: 300px;
    height: 150px;
    background-color: #FFFFFF;
    z-index: 20;
}
.close {
    cursor:hand;
    font-size:12px;
    float: right;
    text-decoration: none;
    margin-top: -18px;
    width: 50px;
    height:30px;
}
.close a {
    font-size:12px;
    text-decoration: none;
}
div#loginTopDIV {
    width: 99%;
    height: 20px;
    border: 2px;
    float:left;
    float:right;
    solid:#71C6FF;
    padding:5px;
    background-color: #EEF7FE;
    cursor:auto;
}
div#pageTlos {
    width: 100%;
    height: 20px;
    border: 2px;
    float:left;
    float:right;
    padding:5px;
    cursor:auto;
}
.close em {
    font-style: normal;
}
-->
</style>
<script type="text/javascript">
  <!--
    function show(ele)
    {
      eval(ele + ".style.display = ''");
    }
    function hidden(ele)
    {
      eval(ele + ".style.display = 'none'");
    }
  //-->
  </script>
</head>
<body style="font-size:14px;">
<div style="overflow: hidden;">
  <p id="query">查询</p>
</div>
<div id="mbDIV" style="display: none;"></div>
<div id="loginDIV" style="top: 150px;left: 100px;display: none;width:90%;height:65%;border: 2px solid #71C6FF;padding:5px;">
  <div id="loginTopDIV">
    <center><img src="login_icon1.gif" />
      以下是XXX查询结果
    </center>
    <a href="#" id="close"><span class="close"><div style="float:left"><img src="close.gif" /></div><em style="color:#006699;"> 关闭</em></span></a></div>
  <div id="pageTlos" class="pagination">
<ul>
<li class="disablepage">上一页</li>
<li class="currentpage">1</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a>...</li>
<li><a href="#">15</a></li>
<li><a href="#">16</a></li>
<li class="nextpage"><a href="#">下一页</a></li>
</ul>
  </div>
  <p style="text-align: center;">查询到的内容显示在这里哦</p>
</div>
<script type="text/javascript">
    /**
     * 这里是操作层(关闭)事件
     */
<!--
  var mbDIV = document.getElementById("mbDIV");
  var loginDIV = document.getElementById("loginDIV");
  var loginTopDIV = document.getElementById("loginTopDIV");
  document.getElementById("close").onclick = function()
                                                {
                                                  hidden("loginDIV");
                                                  hidden("mbDIV");
                                                }
  query.onclick = function()
                 {
                   loginDIV.style.top = "200px";
                   loginDIV.style.left = "40px";
                   show("loginDIV");
                   show("mbDIV")
                 }
//-->
</script>
</body>
</html>
 
   