点击弹出遮罩层，并且里面出现一个居中显示窗口

代码如下

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<html>
<head>
<meta charset="utf-8">
<style>
*{
padding:0;
margin:0;
}
.lbOverlay{
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    zoom: 1;
    background: #2f2e2e;
    z-index: 999;
    width:100%;
    height:100%;
    filter:alpha(opacity=50); /*IE滤镜，透明度50%*/
    -moz-opacity:0.5; /*Firefox私有，透明度50%*/
    opacity:0.5;/*其他，透明度50%*/
}
.hidden_pro_au {
    display:none;
    background: #fff;
    padding: 6px;
    text-align: left;
    width: 400;
    height: 300;
    background: #ccc;
    overflow: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999999
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
function show(){
    $(".lbOverlay").css({"height":window.screen.availHeight});
    $(".lbOverlay").show();
 
    var st=$(document).scrollTop(); //页面滑动高度
    var objH=$(".hidden_pro_au").height();//浮动对象的高度
    var ch=$(window).height();//屏幕的高度  
    var objT=Number(st)+(Number(ch)-Number(objH))/2;   //思路  浮动高度+（（屏幕高度-对象高度））/2
    $(".hidden_pro_au").css("top",objT);
     
    var sl=$(document).scrollLeft(); //页面滑动左移宽度
    var objW=$(".hidden_pro_au").width();//浮动对象的宽度
    var cw=$(window).width();//屏幕的宽度  
    var objL=Number(sl)+(Number(cw)-Number(objW))/2; //思路  左移浮动宽度+（（屏幕宽度-对象宽度））/2
    $(".hidden_pro_au").css("left",objL);
    $(".hidden_pro_au").slideDown("20000");//这里显示方式多种效果
}
function closeDiv(){
    $(".lbOverlay").hide();
    $(".hidden_pro_au").hide();
}
</script>
</head>
<body>
页面原来内容页面原来内容页面原来内容页面原来内容页面原来内容页面原来内容页面原来内容页面原来内容页面原来内容页面原来内容页面原来内容页面原来内容页面原来内容页面原来内容页面原来内容页面原来内容页面原来内容页面原来内容页面原来内容
<button onclick="show()">点我弹出遮罩层</button>
<div class="lbOverlay"  onclick="closeDiv()"></div>
<div class="hidden_pro_au">显示具体的内容</div>
</body>
</html>

　　

　　思路就是 先写html代码。为了看出效果 先把 遮罩层的none值 改成block。便于观察调试。先写全屏遮罩层，这个没什么说的，需要注意的是。这里用的定位是fixed 配合宽高百分百，这样始终能够铺满屏。透明度注意兼容。z-index 普通页面层级要高一些（值要大点），写完之后，把css属性 display改成none ；紧接着开始写遮罩层内部窗口的样式，也是先display为block。这里用定位absolute,z-index层级要更高点。设置好这个div窗口宽高（具体定位多少由jq完成），完成之后把display 改成none;然后开始写jq方法show（）；jq思路 写在代码了，（//思路 浮动高度+（（屏幕高度-对象高度））/2） 确定了 div显示窗口的top高度为居中。宽度也一样。然后修改之后把遮罩层的div 和 显示窗口的div 属性dispaly 改成 block 即可;我这给  遮罩层也绑定了个方法。点击他 关闭遮罩效果 ；也就是修改 俩个div的 display属性为none

posted @   一颗星—Broken  阅读(12505)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示