<!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. win10安装express遇到的问题。

    昨天在centos上成功安装了express,今天想在win10上面装一个,死活安装不了 express可以正常安装,但是每次安装express-generator的时候一直报错 659 silly ...

  2. vue-cli中的webpack打包配置

    如下: assetsSubDirectory: 'static', assetsPublicPath: '/projectName/', 其中assetsSubDirectory是代表服务器上的实际路 ...

  3. 数组其他部分及java常见排序

    数据结构的基本概述: 数据结构是讲什么,其实大概就分为两点: 1.数据与数据之间的逻辑关系:集合.一对一.一对多.多对多 2.数据的存储结构: 一对一的:线性表:顺序表(比如:数组).链表.栈(先进后 ...

  4. createFile

    #include<iostream> #include<windows.h> #include<stdio.h> using namespace std; int ...

  5. web服务的简单介绍及apache服务的安装

    一,web服务的作用:  是指驻留于因特网上某种类型计算机的程序,可以向浏览器等Web客户端提供文档.可以放置网站文件,让全世界浏览:   可以放置数据让全世界下载.目前最主流的三个Web服务器是Ap ...

  6. 详解exif.js，应用于canvas照片倒转（海报H5）

    业务背景,苹果手机调用上传接口拍照没有问题但是上传到网页上照片倒转了解决方法利用exif.js读取图片参数并对图片进行元数据修改 window.btoa(str)转码 window.atob(base ...

  7. 3dsmax2017卸载/安装失败/如何彻底卸载清除干净3dsmax2017注册表和文件的方法

    3dsmax2017提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装3dsmax2017失败提示3dsmax2017安装未完成,某些产品无法安装,也有时候想重新 ...

  8. day1-Python擅长的领域+学习内容

    Python擅长的领域 WEB开发 Django   Pyramid     Tornado       Bottle    Flask    WebPy 网络编程 Twisted        Re ...

  9. Android中Service与多个Activity通信

    由于项目需要,我们有时候需要在service中处理耗时操作,然后将结果发送给activity以更新状态.通常情况下,我们只需要在一个service与一个activity之间通信,通常这种情况下,我们使 ...

  10. iis支持asp.net4.0的注册命令使用方法及部署网站注意事项

    如果没有按照正常的先装iis后装.net的顺序,可以使用以下命令重新注册一下,这样iis就可以支持asp.net 4.0了   32位的Windows: 1. 运行->cmd,打开窗口时请以管理 ...