jquery居中窗口-页面加载直接居中

最新推荐文章于 2021-06-02 11:19:07 发布

qq_29069777

最新推荐文章于 2021-06-02 11:19:07 发布

阅读量228

点赞数

分类专栏：前端文章标签： jquery

原文链接：https://www.mk2048.com/blog/blog.php?id=hbbi2i0bciib&title=jquery%E5%B1%85%E4%B8%AD%E7%AA%97%E5%8F%A3-%E9%A1%B5%E9%9D%A2%E5%8A%A0%E8%BD%BD%E7%9B%B4%E6%8E%A5%E5%B1%85%E4%B8%AD

版权

前端专栏收录该内容

1175 篇文章 2 订阅

订阅专栏

<!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>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link rel="stylesheet" type="text/css" href="" />
  <style type="text/css"></style>
  <script type="text/javascript" src="jquery-1.7.1.min.js "></script>
 </head>
 <body>
 <div id="pop" style="width:200px;height:100px;border:1px solid red;background-color:red;">
 我是测试文字
 </div>
<script type="text/javascript">
  showDiv($("#pop"));
function showDiv(obj){
 $(obj).show();
 center(obj);
 $(window).scroll(function(){
  center(obj);
 });
 $(window).resize(function(){
  center(obj);
 });
}

function center(obj){
 var windowWidth = document.documentElement.clientWidth;  
 var windowHeight = document.documentElement.clientHeight;  
 var popupHeight = $(obj).height();  
 var popupWidth = $(obj).width();   
 $(obj).css({  
  "position": "absolute",  
  "top": (windowHeight-popupHeight)/2 $(document).scrollTop(),  
  "left": (windowWidth-popupWidth)/2  
 }); 
}
</script>
 </body>
</html>