点击弹出浮动层(自动适应居中) 兼容 ie6+,FF,Opera,谷歌

    
    

     
     <!
     
     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=gb2312"
     
      
     
     />
     
     

     
     <
     
     title
     
     >
     
     点击弹出浮动层(自动适应居中) 兼容 ie6+,FF,Opera,谷歌
     
     </
     
     title
     
     >
     
     

     
     <
     
     script 
     
     src
     
     ="http://common.cnblogs.com/script/jquery.js"
     
      type
     
     ="text/javascript"
     
     ></
     
     script
     
     >
     
     

     
     <
     
     script 
     
     type
     
     ="text/javascript"
     
     >
     
     
$(
     
     function
     
     (){
    $(
     
     "
     
     #clickme
     
     "
     
     ).click(
     
     function
     
     (){
    
     
     //
     
     slow隐藏的段落显示出来，历时600毫秒
     
     

     
         
     
     //
     
     fast用迅速的动画将隐藏的段落显示出来，历时200毫秒
     
     

     
         
     
     //
     
     100自定义时间
     
     

     
         
     
     //
     
     normal
     
     

     
        
     
     //
     
      alert(document.documentElement.clientHeight);
     
     

     
         ietest();
        $(
     
     "
     
     #TB_SRP_DIALOG
     
     "
     
     ).show(
     
     "
     
     normal
     
     "
     
     );
    });
    $(
     
     "
     
     .closeButton
     
     "
     
     ).click(
     
     function
     
     (){
         $(
     
     "
     
     #TB_SRP_DIALOG
     
     "
     
     ).hide(
     
     "
     
     normal
     
     "
     
     );
    });
});
ietest
     
     =
     
     function
     
     (){
    
     
     var
     
      _width
     
     =
     
     (document.documentElement.clientWidth
     
     /
     
     2)-($("#TB_SRP_DIALOG").width()
     
     /
     
     2
     
     );
     
     //
     
     窗口宽度 (浏览器宽度/2)-(浮动层宽度/2)
     
     

     
         
     
     var
     
      _height
     
     =
     
     (document.documentElement.clientHeight
     
     /
     
     2)-($("#TB_SRP_DIALOG").height()
     
     /
     
     2
     
     );
     
     //
     
     窗口高度 (浏览器高度/2)-(浮动层高度/2)
     
     

     
         
     
     if
     
      ($.browser.version 
     
     ==
     
      
     
     "
     
     6.0
     
     "
     
     )
     
     //
     
     $.browser.msie ie系列浏览器
     
     

     
         {
     document.getElementById(
     
     '
     
     TB_SRP_DIALOG
     
     '
     
     ).style.left
     
     =
     
     _width;
     document.getElementById(
     
     '
     
     TB_SRP_DIALOG
     
     '
     
     ).style.top
     
     =
     
     _height;
    }
    
     
     else
     
     {
        $(
     
     "
     
     #TB_SRP_DIALOG
     
     "
     
     ).css({left:_width,top:_height});
    }
}
window.onresize
     
     =
     
     ietest; 
     
     //
     
     缩放窗体时触发事件
     
     

     
     </
     
     script
     
     >
     
     


     
     <
     
     style 
     
     type
     
     ="text/css"
     
     >
     
     
 .search-popup-window 
     
     {
     
     
    background
     
     :
     
      none repeat scroll 0 0 padding-box rgba(0, 0, 0, 0.25)
     
     ;
     
     /*
     
     padding-box 边框背景 rgba颜色跟透明度
     
     */
     
     
    border-radius
     
     :
     
      5px
     
     ;
     
       
     
     /*
     
     边框圆角，不支持IE
     
     */
     
     
    overflow
     
     :
     
      hidden
     
     ;
     
     
    padding
     
     :
     
      8px
     
     ;
     
     
    position
     
     :
     
      fixed
     
     ;
     
     
    _position
     
     :
     
      absolute
     
     ;
     
     /*
     
     支持IE6浮动定位
     
     */
     
     
    z-index
     
     :
     
      10000
     
     ;
     
     
    display
     
     :
     
     none
     
     ;
     
         
    width
     
     :
     
     360px
     
     ;
     
     
    height
     
     :
     
     285px
     
     ;
     
     
     

     
     }
     
     
.search-popup-wrapper, .search-popup-window-wrapper 
     
     {
     
     
    background-color
     
     :
     
      #FFFFFF
     
     ;
     
     
    border
     
     :
     
      1px solid #818181
     
     ;
     
     
    height
     
     :
     
      100%
     
     ;
     
     
    position
     
     :
     
      relative
     
     ;
     
     
    z-index
     
     :
     
      10001
     
     ;
     
     

     
     }
     
     
.search-popup-window .hd 
     
     {
     
     
    -moz-user-select
     
     :
     
      none
     
     ;
     
     
    background
     
     :
     
      url("http://img04.taobaocdn.com/tps/i4/T1MBVHXjdeXXXXXXXX.png") repeat-x scroll 0 -1267px #FFFFFF
     
     ;
     
     
    height
     
     :
     
      33px
     
     ;
     
     
    position
     
     :
     
      relative
     
     ;
     
     
    z-index
     
     :
     
      3
     
     ;
     
     

     
     }
     
     
.search-popup-window .hd h4 
     
     {
     
     
    -moz-user-select
     
     :
     
      none
     
     ;
     
     
    color
     
     :
     
      #333333
     
     ;
     
     
    font-size
     
     :
     
      14px
     
     ;
     
     
    font-weight
     
     :
     
      normal
     
     ;
     
     
    left
     
     :
     
      20px
     
     ;
     
     
    position
     
     :
     
      absolute
     
     ;
     
     
    top
     
     :
     
      -10px
     
     ;
     
     
    _top
     
     :
     
      8px
     
     ;
     
     

     
     }
     
     
.search-popup-window .hd .closeButton 
     
     {
     
     
    background
     
     :
     
      url("http://img02.taobaocdn.com/tps/i2/T1ovpYXdtyXXXXXXXX-260-700.png") no-repeat scroll -77px -578px transparent
     
     ;
     
     
    display
     
     :
     
      block
     
     ;
     
     
    height
     
     :
     
      22px
     
     ;
     
     
    overflow
     
     :
     
      hidden
     
     ;
     
     
    position
     
     :
     
      absolute
     
     ;
     
     
    right
     
     :
     
      7px
     
     ;
     
     
    text-indent
     
     :
     
      -9999px
     
     ;
     
     
    top
     
     :
     
      7px
     
     ;
     
     
    width
     
     :
     
      22px
     
     ;
     
     
    z-index
     
     :
     
      10001
     
     ;
     
     

     
     }
     
     
.search-popup-window .hd .closeButton:hover 
     
     {
     
     
    background-position
     
     :
     
      -55px -578px
     
     ;
     
     

     
     }
     
     
.search-popup-window .bd 
     
     {
     
     
    background
     
     :
     
      none repeat scroll 0 0 #FFFFFF
     
     ;
     
     
    display
     
     :
     
      block
     
     ;
     
     
    overflow
     
     :
     
      hidden
     
     ;
     
     
    padding
     
     :
     
      5px 20px 14px
     
     ;
     
     
    position
     
     :
     
      relative
     
     ;
     
     
    z-index
     
     :
     
      2
     
     ;
     
     

     
     }
     
     
.dialog-login .bd 
     
     {
     
     
    height
     
     :
     
      250px
     
     ;
     
     
    padding
     
     :
     
      0
     
     ;
     
     

     
     }
     
     

     
     </
     
     style
     
     >
     
     


     
     </
     
     head
     
     >
     
     

     
     <
     
     body
     
     >
     
     

     
     <
     
     a 
     
     href
     
     ="javascript:;"
     
      id
     
     ="clickme"
     
      style
     
     ="position:relative;"
     
     >
     
     点击我
     
     </
     
     a
     
     >
     
      兼容 ie6+,FF,Opera,谷歌

     
     <
     
     div 
     
     class
     
     ="search-popup-window dialog-login"
     
      id
     
     ="TB_SRP_DIALOG"
     
      
     
     >
     
     

     
     <
     
     div 
     
     class
     
     ="search-popup-window-wrapper"
     
     >
     
     

     
     <
     
     div 
     
     class
     
     ="hd"
     
     ><
     
     h4
     
     >
     
     标题
     
     </
     
     h4
     
     ><
     
     a 
     
     class
     
     ="closeButton"
     
      href
     
     ="#"
     
     ></
     
     a
     
     ></
     
     div
     
     ><
     
     div 
     
     class
     
     ="bd"
     
     >
     
     

     
     <
     
     div 
     
     width
     
     ="360"
     
      height
     
     ="275"
     
     >
     
     
内容


     
     </
     
     div
     
     >
     
     


     
     </
     
     div
     
     ></
     
     div
     
     ></
     
     div
     
     >
     
     


     
     </
     
     body
     
     >
     
     

     
     </
     
     html
     
     >