jQuery实现的浮动层div浏览器居中显示效果

最新推荐文章于 2018-04-17 17:53:59 发布

weixin_30664615

最新推荐文章于 2018-04-17 17:53:59 发布

阅读量164

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/sjqq/p/6480836.html

版权

本文实例讲述了jQuery实现的浮动层div浏览器居中显示效果。分享给大家供大家参考，具体如下：

1.在页面的head中引入jQuery

<script type="text/javascript" language="javascript" src="jquery-1.7.2.min.js"></script>

2.在页面的head中加入浮动层和遮罩层的样式

<style>

#previewDiv{ z-index : 9999 ; position : absolute ; display : none ; background : #fff ; border-top : 5px solid #999 ; border-bottom : 7px solid #999 ; border-left : 5px solid #999 ; border-right : 7px solid #999 ;}

.mask { color : #C7EDCC ; background-color : #999 ; position : absolute ; top : 0px ; left : 0px ; width : 100% ; height : 3000px ;opacity: 0.6 ;filter: "alpha(opacity=60)" ;filter: alpha(Opacity= 60 );}

</style>

3.在页面的底部加上浮动的div

 
   < 
   div 
   id 
   = 
   "previewDiv" 
   > 
  
   < 
   table 
   id 
   = 
   "head" 
   > 
  
   < 
   tr 
   >< 
   td 
   >短消息预览</ 
   td 
   ></ 
   tr 
   > 
  
   </ 
   table 
   > 
  
   < 
   table 
   align 
   = 
   "center" 
   > 
  
   < 
   tr 
   >< 
   td 
   > 
  
   < 
   div 
   class 
   = 
   "zhnx_neirong" 
   > 
  
   < 
   h3 
   >您收到了来自脚本之家的回复</ 
   h3 
   > 
  
   < 
   p 
   class 
   = 
   "duanluo" 
   >  内容：这是浮动层居中的实例</ 
   span 
   ></ 
   p 
   > 
  
   </ 
   div 
   > 
  
   < 
   div 
   class 
   = 
   "zhnx_huifu" 
   >< 
   p 
   >< 
   a 
   href 
   = 
   "javascript:open('http://www.jb51.net/');" 
   >查看脚本之家</ 
   a 
   ></ 
   p 
   ></ 
   div 
   > 
  
   </ 
   td 
   ></ 
   tr 
   > 
  
   </ 
   table 
   > 
  
   < 
   table 
   align 
   = 
   "center" 
   > 
  
   < 
   tr 
   >< 
   td 
   >< 
   div 
   >< 
   input 
   type 
   = 
   "button" 
   value 
   = 
   " 关 闭 " 
   onclick 
   = 
   "hide();" 
   /></ 
   div 
   ></ 
   td 
   ></ 
   tr 
   > 
  
   </ 
   table 
   > 
  
   </ 
   div 
   > 
  
    4.添加显示和隐藏的js函数 
  
    function 
    show(){ 
   
    //添加并显示遮罩层 
   
    $( 
    "<div id='mask'></div>" 
    ).addClass( 
    "mask" 
    ).click( 
    function 
    () {}) .appendTo( 
    "body" 
    ).fadeIn(0); 
   
    document.getElementById( 
    "mask" 
    ).style.display =  
    "block" 
    ; 
   
    var 
    windowWidth = document.documentElement.clientWidth; 
   
    var 
    windowHeight = document.documentElement.clientHeight; 
   
    var 
    popupHeight = $( 
    "#previewDiv" 
    ).height(); 
   
    var 
    popupWidth = $( 
    "#previewDiv" 
    ).width(); 
   
    $( 
    "#previewDiv" 
    ).css({ 
   
    "position" 
    :  
    "absolute" 
    , 
   
    "top" 
    : (windowHeight-popupHeight)/2+$(document).scrollTop(), 
   
    "left" 
    : (windowWidth-popupWidth)/2 
   
    }); 
   
    $( 
    "#previewDiv" 
    ).show(); 
   
    } 
   
    function 
    hide(){ 
   
    $( 
    "#mask" 
    ).remove(); 
   
    $( 
    "#previewDiv" 
    ).hide(); 
   
    } 
   
     完整实例代码如下： 
   
     <!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>Test</title> 
    
     <script type= 
     "text/javascript" 
     language= 
     "javascript" 
     src= 
     "jquery-1.7.2.min.js" 
     ></script> 
    
     </head> 
    
     <body> 
    
     <style> 
    
     #previewDiv{z-index: 9999;position:absolute;display:none;background:#fff;border-top:5px solid #999;border-bottom:7px solid #999;border-left:5px solid #999;border-right:7px solid #999;} 
    
     .mask {color: 
     #C7EDCC;position:absolute;top:0px;left:0px;width:100%;height:3000px;opacity: 0.6;filter: "alpha(opacity=60)";filter: alpha(Opacity=60);} 
    
     </style> 
    
     <div id= 
     "previewDiv" 
     > 
    
     <table id = 
     "head" 
     > 
    
     <tr><td>短消息预览</td></tr> 
    
     </table> 
    
     <table align= 
     "center" 
     > 
    
     <tr><td> 
    
     <div class= 
     "zhnx_neirong" 
     > 
    
     <h3>您收到了来自脚本之家的回复</h3> 
    
     <p class= 
     "duanluo" 
     >  内容：这是浮动层居中的实例</span></p> 
    
     </div> 
    
     <div class= 
     "zhnx_huifu" 
     ><p><a href= 
     "javascript:open('http://www.jb51.net/');" 
     >查看脚本之家</a></p></div> 
    
     </td></tr> 
    
     </table> 
    
     <table align= 
     "center" 
     > 
    
     <tr><td><div><input type= 
     "button" 
     value= 
     " 关 闭 " 
     onclick= 
     "hide();" 
     /></div></td></tr> 
    
     </table> 
    
     </div> 
    
     <script type= 
     "text/javascript" 
     language= 
     "javascript" 
     > 
    
     function 
     show(){ 
    
     //添加并显示遮罩层 
    
     $( 
     "<div id='mask'></div>" 
     ).addClass( 
     "mask" 
     ).click( 
     function 
     () {}) .appendTo( 
     "body" 
     ).fadeIn(0); 
    
     document.getElementById( 
     "mask" 
     ).style.display =  
     "block" 
     ; 
    
     var 
     windowWidth = document.documentElement.clientWidth; 
    
     var 
     windowHeight = document.documentElement.clientHeight; 
    
     var 
     popupHeight = $( 
     "#previewDiv" 
     ).height(); 
    
     var 
     popupWidth = $( 
     "#previewDiv" 
     ).width(); 
    
     $( 
     "#previewDiv" 
     ).css({ 
    
     "position" 
     :  
     "absolute" 
     , 
    
     "top" 
     : (windowHeight-popupHeight)/2+$(document).scrollTop(), 
    
     "left" 
     : (windowWidth-popupWidth)/2 
    
     }); 
    
     $( 
     "#previewDiv" 
     ).show(); 
    
     } 
    
     function 
     hide(){ 
    
     $( 
     "#mask" 
     ).remove(); 
    
     $( 
     "#previewDiv" 
     ).hide(); 
    
     } 
    
     show(); 
    
     </script> 
    
     </body> 
    
     </html>