<!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. 制作基于centos可以ssh连接的容器以及tomcat容器

    可以ssh连接的centos容器 参考:http://blog.csdn.net/mexel310/article/details/51705777 一. pull好镜像后,运行容器 1. docke ...

  2. [开源] angularjs + Asp.net 前后端分离解决方案

    本文版权归 博客园 萧秦 所有,此处为技术收藏,如有再转,请于篇头明显位置标明原创作者及出处,以示尊重! 作者:萧秦 原文:http://www.cnblogs.com/xqin/p/4862849. ...

  3. Python处理json数据--世界国家维度数据

    1.准备国家的json数据 将准备好的json数据放在指定的目录下,此处可以重这里下载 2.测试编写python脚本处理json提取字段值 #coding:utf8 import time, re, ...

  4. static成员变量和static成员函数例程

    #include "pch.h" #include <iostream> using namespace std; class goods { public: good ...

  5. 基础篇：6.2）形位公差-符号 Symbol

    本章目的:了解定义形位公差的符号. 1.公差特征项目的符号(GM新标准) //形位公差共:5类14个,4,2,3,3,2. 2.附加符号(GM新标准) //①基本尺寸(理论尺寸)没有公差,无需检验(不 ...

  6. 01背包--hdu2639

    hdu-2639 The title of this problem is familiar,isn't it?yeah,if you had took part in the "Rooki ...

  7. EntityFramework First,FirstOrDefault,Single,SingleOrDefault的区别

    操作符 如果源序列是空的 源序列只包含一个元素 源序列包含多个元素 First 抛异常 返回该元素 返回第一个元素 FirstOrDefault 返回default(TSource) 返回该元素 返回 ...

  8. SQL Server触发器创建、删除、修改、查看

    一:触发器是一种特殊的存储过程,它不能被显式地调用,而是在往表中插入记录﹑更新记录或者删除记录时被自动地激活.所以触发器可以用来实现对表实施复杂的完整性约束. 二:SQL Server为每个触发器都创 ...

  9. react&webpack使用css、less && 安装原则 --- 从根本上解决问题。

    在webpack-react项目中,css的使用对于不同人有不同的选择,早起是推荐在jsx文件中使用 css inline js的,但是这种方法要写很多对象来表示一个一个的标签,并且对于这些对象,我们 ...

  10. 9.1_the end

    选择题 1.考察正则,书写一个6位数的邮箱 a var mail=/\d{6}/; b var mail=new RegExp("/\d{6}/"); 分析:对a,应该要添加开头和 ...