Ferris教程学习笔记:js示例2.9

最新推荐文章于 2024-04-30 22:06:17 发布

weixin_34344403

最新推荐文章于 2024-04-30 22:06:17 发布

阅读量98

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/kaka100/p/3470772.html

版权

实现思路:

涂盖层目的在占据整个屏幕并且加上透明度
完成这样的效果需要定位position:absolute;
opacity:0.5 FF 百分之50%的透明度
filter:alpha(opacity=50); IE 百分之50%透明度

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gbk">
 5 <title>弹出层效果</title>
 6 <style type="text/css">
 7 html,body{height:100%;overflow:hidden;}
 8 body,div,h2{margin:0;padding:0;}
 9 center{padding-top:10px;}
10 button{cursor:pointer;}
11 /*涂盖层*/
12 #overlay{position:absolute;top:0;left:0;width:100%;height:100%;
13 background:#000;opacity:0.5;filter:alpha(opacity=50);display:none;color:#fc0;}
14 
15 #win{position:absolute;top:50%;left:50%;
16 width:400px;height:200px;background:#fff;border:2px solid #f90;
17 margin:-102px 0 0 -202px;display:none;}
18 
19 h2{font-size:12px;text-align:right;background:#fc0;border-bottom:3px solid #f90;padding:5px;}
20 h2 span{color:#f90;cursor:pointer;background:#fff;border:1px solid #f90;padding:0 2px;}
21 </style>
22 </head>
23 <body>
24 <div style="display:none" id="overlay">涂盖层</div>
25 <div style="display:none" id="win">
26 <h2><span id="close">×</span></h2>
27 </div>
28 <center><button>弹出层</button></center>
29 <script type="text/javascript">
30  //1:涂盖层目的在占据整个屏幕并且加上透明度
31  //完成这样的效果需要定位position:absolute;
32  //opacity:0.5 FF 百分之50%的透明度
33  //filter:alpha(opacity=50); IE 百分之50%透明度
34  window.onload = function(){
35   var button = document.getElementsByTagName("button")[0];
36   var overlay = document.getElementById("overlay");
37   var win =  document.getElementById("win");
38   var close = document.getElementById("close");
39   button.onclick = function(){
40     overlay.style.display = "block";
41     win.style.display = "block";
42   };
43   
44   close.onclick = function(){
45     overlay.style.display = "none";
46     win.style.display = "none";    
47   }
48   
49   
50  
51  };
52  
53 </script>
54 </body>
55 </html>

转载于:https://www.cnblogs.com/kaka100/p/3470772.html

weixin_34344403

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ferris教程学习笔记:js示例2.9

实现思路:涂盖层目的在占据整个屏幕并且加上透明度完成这样的效果需要定位position:absolute;opacity:0.5 FF 百分之50%的透明度filter:alpha(opacity=50); IE 百分之50%透明度 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h...
复制链接

扫一扫