一个用简单的JavaScript及Css实现的模式层-优快云博客

代码

1 <style type="text/css">
2 /*层1的样式*/
3 .div1{
4 /*本层要实现覆盖模式窗口以外全部内容的半透明效果*/
5 background-color:#000000;/*背景色*/
6 position: absolute ;/*绝对定位，必选，使层绝对依照top,left的标准显示，否则将不能实现覆盖*/
7 top:0;/*层与页面顶部距离*/
8 left:0;/*层与左侧边距离*/
9 z-index:1;/*当发生重叠时的优先级，数大的会覆盖数较小的，没进行设置的均可视为小于0*/
10 display:none; /*层是否可见，初始化none不可见*/
11 filter:Alpha(opacity=30);/*过滤颜色，设置透明度（可见度）30，数越小越透明*/
12 }
13
14 /*层2的样式*/
15 .div2{
16 /*本层显示在最前端，其它控件均不可用*/
17 width:300px;/*显示宽度*/
18 height:200px;/*显示高度*/
19 position:absolute;/*绝对定位*/
20 z-index:2;/*优先级*/
21 display: none;/*是否显示*/
22 border:3px inset blue; /*边框：宽度，样式，颜色*/
23 background-color:#9999CC;/*背景色*/
24 }
25 /*当然你可以自定义添加或更改更多的样式都无所谓*/
26 </style>
27
28
29 <script type="text/javascript">
30 //显示的方法，说明：前缀的div1、div2、body等，均为Id值
31 function show(){
32 div1.style.display="inline";//设置层1显示
33 div1.style.width=body.clientWidth;//设置层1宽度等于body宽度，width=100%也可以，不过有一些误差，所以最好用这个
34 div1.style.height=body.clientHeight;//设置层1高度满屏
35 div2.style.display="inline";//设置层2的显示
36 div2.style.top=body.clientHeight/2-div2.clientHeight/2;//设置层2的距顶位置居中算法
37 div2.style.left=body.clientWidth/2-div2.clientWidth/2;//设置层2的距左位置居中算法
38 }
39
40 //关闭显示
41 function closeShow(){
42 div1.style.display="none";
43 div2.style.display="none";
44 }
45 </script>
46 </head>
47 <body bgcolor="#CCFF00" id="body">
48 
49 <input type="button" value="测试按钮" onClick="show()"/>
50
51 <div id="div1" class="div1"></div>
52
53 <div id="div2" class="div2">
54 
55 <div id="div3" style="width:100%;height:20px; background-color:#0099FF" align="right">
56 <label onClick="closeShow()" style="font-weight:bolder;cursor:hand">
57 关闭 
58 </label>
59 </div>
60 <input type=text></br>
61 <input type=text>
62 </div>
63 <body>

转载于:https://www.cnblogs.com/liemkell/archive/2010/11/13/1876402.html