jquery 实现弹出层效果

 
   
    
   <! 
   DOCTYPE html PUBLIC  
   " 
   -//W3C//DTD XHTML 1.0 Transitional//EN 
   " 
     
   " 
   http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd 
   " 
   > 
   
 
   < 
   html xmlns 
   = 
   " 
   http://www.w3.org/1999/xhtml 
   " 
   > 
   
 
   < 
   head 
   > 
   
 
   < 
   meta http 
   - 
   equiv 
   = 
   " 
   Content-Type 
   " 
    content 
   = 
   " 
   text/html; charset=utf-8 
   " 
     
   /> 
   
 
   < 
   title 
   > 
   jquery弹出层实例 
   </ 
   title 
   > 
   
 
   < 
   script type 
   = 
   " 
   text/javascript 
   " 
    src 
   = 
   " 
   http://www.jqueryajax.com/wp-content/uploads/2009/03/jquery-132min1.js 
   " 
   ></ 
   script 
   > 
   
 
   < 
   script type 
   = 
   " 
   text/javascript 
   " 
   > 
   

$(function()
{
   $( 
   " 
   #btnShow 
   " 
   ).click(function()
   {
      var str 
   = 
   " 
   我是弹出对话框 
   " 
   ;
      $( 
   " 
   .form 
   " 
   ).html(str);
      $( 
   " 
   #BgDiv 
   " 
   ).css({ display: 
   " 
   block 
   " 
   ,height:$(document).height()});
      var yscroll 
   = 
   document.documentElement.scrollTop;
      $( 
   " 
   #DialogDiv 
   " 
   ).css( 
   " 
   top 
   " 
   , 
   " 
   100px 
   " 
   );
      $( 
   " 
   #DialogDiv 
   " 
   ).css( 
   " 
   display 
   " 
   , 
   " 
   block 
   " 
   );
      document.documentElement.scrollTop 
   = 
   0 
   ;
   });
   $( 
   " 
   #btnClose 
   " 
   ).click(function()
   {
      $( 
   " 
   #BgDiv 
   " 
   ).css( 
   " 
   display 
   " 
   , 
   " 
   none 
   " 
   );
      $( 
   " 
   #DialogDiv 
   " 
   ).css( 
   " 
   display 
   " 
   , 
   " 
   none 
   " 
   );
   });
});
 
   </ 
   script 
   > 
   
 
   < 
   style type 
   = 
   " 
   text/css 
   " 
   > 
   
body,h2{margin: 
   0 
    ; padding: 
   0 
   ;}
#BgDiv{background 
   - 
   color:#e3e3e3; position:absolute; z 
   - 
   index: 
   99 
   ; left: 
   0 
   ; top: 
   0 
   ; display:none; width: 
   100 
   % 
   ; height:1000px;opacity: 
   0.5 
   ;filter: alpha(opacity 
   = 
   50 
   ); 
   - 
   moz 
   - 
   opacity:  
   0.5 
   ;}
#DialogDiv{position:absolute;width:400px; left: 
   50 
   % 
   ; top: 
   50 
   % 
   ; margin 
   - 
   left: 
   - 
   200px; height:auto; z 
   - 
   index: 
   100 
   ;background 
   - 
   color:#fff; border:1px #8FA4F5 solid; padding:1px;}
#DialogDiv h2{ height:25px; font 
   - 
   size:14px; background 
   - 
   color:#8FA4F5; position:relative; padding 
   - 
   left:10px; line 
   - 
   height:25px;}
#DialogDiv h2 a{position:absolute; right:5px; font 
   - 
   size:12px; color:# 
   000000 
   }
#DialogDiv .form{padding:10px;}
 
   </ 
   style 
   > 
   
 
   </ 
   head 
   > 
   

 
   < 
   body  
   > 
   

 
   < 
   div id 
   = 
   " 
   BgDiv 
   " 
   ></ 
   div 
   > 
   
 
   < 
   div id 
   = 
   " 
   DialogDiv 
   " 
    style 
   = 
   " 
   display:none 
   " 
   > 
   
 
   < 
   h2 
   > 
   弹出层 
   < 
   a href 
   = 
   " 
   # 
   " 
    id 
   = 
   " 
   btnClose 
   " 
   > 
   关闭 
   </ 
   a 
   ></ 
   h2 
   > 
   
     
   < 
   div  
   class 
   = 
   " 
   form 
   " 
   > 
   
    我是弹出对话框！！
     
   </ 
   div 
   > 
   
 
   </ 
   div 
   > 
   

 
   < 
   p 
   >& 
   nbsp; 
   </ 
   p 
   > 
   
 
   < 
   p align 
   = 
   " 
   center 
   " 
   > 
   
   
   < 
   input value 
   = 
   " 
   弹出 
   " 
     
   class 
   = 
   " 
   but 
   " 
    type 
   = 
   " 
   button 
   " 
    id 
   = 
   " 
   btnShow 
   " 
     
   /> 
   
 
   </ 
   p 
   > 
   
 
   </ 
   body 
   > 
   
 
   </ 
   html 
   >