首先上一张图 看下弹出层的效果
从图中可以看到二部分 一是弹出层 二是遮照层
弹出层:即弹出你要操作的内容
遮照层:遮照住不要操作的内空
实际技术原理主要是 CSS +JS (z-index是核心)
CSS部分主要是 z-index (CSS定义为 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 说白了就是 凹 凸 )
JS则是 weight 和 wdith 的计算，你弹出来层的大小 位置!
下面是代码:
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=gb2312" /> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 #LoginWind{ 8 position: absolute; 9 visibility: hidden; 10 overflow: hidden; 11 border:1px solid #CCC; 12 background-color:#F9F9F9; 13 border:1px solid #333; 14 Dpadding:5px; 15 z-index:999; 16 }/*弹出层样式*/ 17 18 #popup{position:absolute; 19 100%; 20 height:100%; 21 z-index:888; 22 background:#666; 23 filter:alpha(opacity=60); 24 opacity: 0.6; 25 display:none;}/*遮罩层样式*/ 26 </style> 27 </head> 28 29 <body> 30 <div id="popup"></div> 31 <div style="200px" id="LoginWind"> 32 用户名:<input type="text" id="txtName" /><br /> 33 密码:<input type="text" id="txtPwd" /><br /> 34 <input type="button" id="btnLogin" value="登录" /> 35 </div> 36 <input type="button" id="btnOPenDiv" value="打开登录窗口" onclick="showPopup(300,200);" /> 37 38 39 40 <script type="text/javascript"> 41 function showPopup(h,w) 42 { 43 var popUp=document.getElementById('LoginWind') 44 popUp.style.top = "200px"; 45 popUp.style.left = "200px"; 46 popUp.style.width = w + "px"; 47 popUp.style.height = h + "px"; 48 popUp.style.visibility = "visible"; 49 document.getElementById("popup").style.display="block"; 50 } 51 </script> 52 </body> 53 </html>
//下面是效果
//代码功能，及CSS效果还可很多可以加强的地方，我这里主要是学习知道它是怎么实现的!