<!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. Azure File挂载报错--System Error 1231

    背景信息: 1.Azure 虚拟机与Azure File位于同一区域 2.同一Azure File可以挂载到别的同型号的虚拟机上使用,唯独挂载到问题机器(test01)时出现如下报错:System E ...

  2. js 鼠标拖拽效果实现

    效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  3. IDEA 直接点击运行执行正常，命令行下面执行Jar包出现部分乱码的情况。

    解决方案如上: 有个Springboot项目为了测试方便,模型类用中文作为字段属性,封装成Odata格式,在通过Springboot发布并打成jar包. 通过命令行启动jar包里面的Springweb ...

  4. 博客主题皮肤探索-GitHub和jsdelivr的使用

    有个前言 本萌并不会前端相关的知识,一切都是自己慢慢摸索出来的,如果存在代码方面的不足,请尽快告诉我~~~ 使用一个主题 目前我博客使用是 https://www.cnblogs.com/bndong ...

  5. django 创建QueryDict类型报错

    报错信息:django.core.exceptions.ImproperlyConfigured: Requested setting LOGGING_CONFIG, but settings are ...

  6. Java 高并发解决方案（电商的秒杀和抢购）

    转载:https://blog.csdn.net/icangfeng/article/details/81201575 电商的秒杀和抢购,对我们来说,都不是一个陌生的东西.然而,从技术的角度来说,这对 ...

  7. Python Requests IP直连

    import re import requests from urllib3.util import connection _orig_create_connection = connection.c ...

  8. 02-oracle字符函数

    字符函数(scott/tiger 登陆) --upper(col name)将字符大写 --lower(col name)将字符小写 --initcap(col name)字符串的首字母大写,其余小写 ...

  9. golang bufio.Scanner

    一, 我们一般会这么用,接收 标准输入的东西: scanner := bufio.NewScanner(os.Stdin) for scanner.Scan() { fmt.Println(scann ...

  10. python+requests抓取页面图片

    前言: 学完requests库后,想到可以利用python+requests爬取页面图片,想到实战一下.依照现在所学只能爬取图片在html页面的而不能爬取由JavaScript生成的图片,所以我选取饿 ...