jquery任意不固定大小div水平垂直居中

╰+攻爆jí腚メ 2022-08-10 14:56 177阅读 0赞

<!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">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <head>
      <title>jquery垂直居中</title>
      <script type="text/javascript" src="jquery.1.6.3.js"></script>
      <script type="text/javascript">
      $(window).resize(function(){
    		$(".white_content").css({
    			position:'absolute',
    			left: ($(window).width() - $('.white_content').outerWidth())/2,
    			top: ($(window).height() - $('.white_content').outerHeight())/2 + $(document).scrollTop()
    		});
      });
      function show(){
    	  document.getElementById('light').style.display='';
    	  document.getElementById('fade').style.display='';
    	  $(window).resize(); 
      }
      function exit(){
    	  document.getElementById('light').style.display='none';
    	  document.getElementById('fade').style.display='none';
      }
      </script>
      <style type="text/css">
      *{ margin:0; padding:0;}
      body{font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif; height: 100%;}
      a{color:#000; text-decoration:none;}
      .img{border:0px;}
      .black_overlay{
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background:#000;
       z-index:1001;
       -moz-opacity: 0.8;
       opacity:.80;
       filter: alpha(opacity=80);
      }
    * html {background-image:url(about:blank); background-attachment:fixed; overflow:hidden;}
    * html body {width: 100%;  height: 100%; }
    
      .white_content {
       position: absolute;
       text-align:right;
       width: 500px;
       height: 400px;
       border: 10px solid #ccc;
       background-color: white;
       z-index:1002;
       overflow: auto;
      }
     </style>
     
     
     </head>
    <body>
     <p><a href="javascript:void(0);" οnclick="show()">展示</a></p>
     
      <div id="light" class="white_content" style="display:none;">
      	<a href="javascript:void(0);" οnclick="exit()">关闭</a>
      </div>
      
      <div id="fade" class="black_overlay"  style="display:none;"></div>
     
    </body>
    </html>