弹出层，半透明蒙层提示的实现办法

    这些天一直在做弹出层的设计，原理在明白之后很好下手！主要技术要点就是：

    1.弹出层的绝对定位，这主要有跨浏览器鼠标位置的获取技术，CSS：z-index定位。

    2.动态控制弹出Div的各种属性。

    3.弹出窗口位置的计算，主要是在有蒙版层的里面，居中的问题。

    4.各种弹出效果和动画。

    先给出普通弹出层的代码：

 1  <script language="javascript" type="text/javascript">
 2  $(function(){
 3   $("#ele1").click(function(ev){
 4      var evs= ev || window.event; 
 5      var XYposition=mousePosition(evs);
 6      var X=XYposition.x;
 7      var Y=XYposition.y; 
 8      $('#blk1').css("opacity","0").css("left",''+X+'px').css("top",''+Y+'px');
 9      $('#blk1').animate({width:"200px",height:"200px",opacity:"1"},3000);
10    })
11   $("#close1").click(function(){
12      $('#blk1').stop().animate({width:"0px",height:"0px",opacity:"0",left:"0px",top:"0px"},300);
13     })
14  
15  });
16  
17  //鼠标位置
18 function mousePosition(ev){
19     if(ev.pageX || ev.pageY){
20     return {x:ev.pageX, y:ev.pageY};
21     }
22     return {
23     x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
24     y:ev.clientY + document.body.scrollTop - document.body.clientTop
25     };
26   } 
27  
28  </script>

带蒙版：

JavaScript

<script language="javascript" type="text/javascript">
 $(function(){
  $("#ele1").click(function(ev){
//蒙版层
     var  CoverAll=getViewportInfo();
var  W=CoverAll.w;
var  H=CoverAll.h;
     $('#all').css("opacity","0.3").css("width",''+W+'px').css("height",''+H+'px');
//弹出层
     var X=(W-300)/2;
     var Y=(H-200)/2; 
     $('#blk1').css("opacity","0").css("left",''+W/2+'').css("top",''+H/2+'');
     $('#blk1').animate({width:"300px",height:"200px",left:''+X+'',top:''+Y+'',opacity:"1"},3000,function(){$('#hideDiv').show();});
   })
//关闭按钮
  $('#close1').click(function(){
     $('#blk1').stop().animate({width:"0px",height:"0px",opacity:"0"},300);
     $('#all').stop().animate({width:"0px",height:"0px",opacity:"0",left:"0px",top:"0px"},100);
  })

 });


//蒙版的尺寸
function getViewportInfo()
{
var w = (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.offsetWidth;

var h = (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.offsetHeight;
return {w:w,h:h};
}; 
</script>

具体就不解释了，注释很充分，大家可以自己运行一下！