<!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>

jquery居中窗口-页面加载直接居中的更多相关文章

  1. jQuery和javaScript页面加载完成时触发的事件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较

    想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> < ...

  3. 动态加载（异步加载）jquery/MUI类库 页面加载完成后加载js类库

    动态加载Mui类库: // ==UserScript== // @name // @version 1.4.0 // @author zzdhidden@gmail.com // @namespace ...

  4. jquery中的页面加载方法load()

    load方法会在元素的onload事件中绑定一个处理函数,如果处理函数绑定给window对象,则会在所有内容(包括窗口,框架,对象和图片等)加载完毕后触发, 如果处理函数绑定在元素上,则会在元素的内容 ...

  5. jquery对象及页面加载完成写法

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  6. js jquery 页面加载初始化方法

    js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...

  7. jQuery 页面加载后执行的事件(3 种方式)

    刚刚工作,没怎么用过 jQuery.今天在工作中遇到一个 jQuery 问题,页面加载的时候需要触发函数,第一直觉告诉我应该写成 onload(),结果不是.后来查了文档发现是 load(),但是版本 ...

  8. js页面加载的几种方式的速度： window.onload、 $(window).load、 $(function(){}）、 $(document).ready(function () {})、onload=‘asd（）’

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. jQuery页面加载初始化的3种方法

    jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(functio ...

随机推荐

  1. Alluxio学习

    介绍 Alluxio(之前名为Tachyon)是世界上第一个以内存为中心的虚拟的分布式存储系统.它统一了数据访问的方式,为上层计算框架和底层存储系统构建了桥梁.应用只需要连接Alluxio即可访问存储 ...

  2. Web开发模式

    原文链接 开发模式的介绍(完善版) 在Web开发模式中,有两个主要的开发结构,称为模式一(Mode I)和模式二(Mode II). 首先我们来理清一些概念吧: DAO(Data Access Obj ...

  3. POJ_1990 MooFest 【树状数组】

    一.题面 POJ1990 二.分析 一个简单的树状数组运用.首先要把样例分析清楚,凑出57,理解一下.然后可以发现,如果每次取最大的v就可以肆无忌惮的直接去乘以坐标差值就可以了,写代码的时候是反着来的 ...

  4. Q606 根据二叉树创建字符串

    你需要采用前序遍历的方式,将一个二叉树转换成一个由括号和整数组成的字符串. 空节点则用一对空括号 "()" 表示.而且你需要省略所有不影响字符串与原始二叉树之间的一对一映射关系的空 ...

  5. Owin WebAPI上传文件

    Owin是微软出了几年的东东了,一直没时间学习.大概了解了下,是一个脱离IIS环境,快速搭建WebAPI服务的东西. 刚好想尝试下尽量脱离IIS创建简单快捷配置的项目,就是用了Nginx+Owin的模 ...

  6. git 换行符替换

    https://help.github.com/en/articles/dealing-with-line-endings rm .git/index git reset https://github ...

  7. PIE SDK 距离分类和最大似然分类

       1.算法功能简介 监督分类,也叫训练场地法.训练分类法,是遥感图像分类的一种,用被确认类别的样本像元去识别其他未知类别像元的过程.监督分类算法有平行算法.平行六面体法.最小距离法.最大似然法.马 ...

  8. 错误及异常处理-[PathTooLongException]指定的路径或文件名太长

    错误信息 System.IO.PathTooLongException:"指定的路径或文件名太长,或者两者都太长.完全限定文件名必须少于 260 个字符,并且目录名必须少于 248 个字符. ...

  9. web.py简易示例

    http://webpy.org/cookbook/index.zh-cn code.py import web urls = ( '/', 'index' ) class index: def GE ...

  10. 解决centos被minerd挖矿程序入侵方法

    记录一次服务器被入侵的解决方法 一:问题说明 1.我的服务器是使用的阿里云的CentOS,收到的阿里云发来的提示邮件如下 然后我查看了运行的进程情况(top 命令),看到一个名为minerd的进程占用 ...