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

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

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

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

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

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

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

 <script language="javascript" type="text/javascript">
 $(function(){
  $("#ele1").click(function(ev){
     var evs= ev || window.event; 
     var XYposition=mousePosition(evs);
     var X=XYposition.x;
     var Y=XYposition.y; 
     $('#blk1').css("opacity","0").css("left",''+X+'px').css("top",''+Y+'px');
     $('#blk1').animate({width:"200px",height:"200px",opacity:"1"},3000);
   })
  $("#close1").click(function(){
     $('#blk1').stop().animate({width:"0px",height:"0px",opacity:"0",left:"0px",top:"0px"},300);
    })
 
 });
 
 //鼠标位置
function mousePosition(ev){
    if(ev.pageX || ev.pageY){
    return {x:ev.pageX, y:ev.pageY};
    }
    return {
    x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
    y:ev.clientY + document.body.scrollTop - document.body.clientTop
    };
  } 
 
 </script>

带蒙版：

<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>

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