<!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. docker部署sftp

    一. 按照我博客中搭建sftp的方法做一个docker镜像 这种方法可用,但不是最好的,待改进.可参照另一篇博客:设置多用户不同权限的sftp服务器搭建 1. dockerfile文件如下,当前目录假 ...

  2. Jmeter-从数据库中获取数据并作为变量传输

    再今天重新学习,从数据库中取数据,并作为变量传到下一个请求中. 首先第一步要导入mysql驱动包 一.添加JDBC Connection Configuration 设置链接 Database URL ...

  3. 多行select中的数据展示和单个删除

    /** 删除多选select中 的某个值,公共方法 只适用于同级节点下只有一个select的情况 v 此按钮,this _id,option中的value的name属性 _name,option中的t ...

  4. 百度地图 Infowidow 内容(content 下标签) 点击事件

    需要监听 infowindow 的打开事件 ,查看InfoWindow API  实现 html 点击效果 代码 var infoWindow = that.createDangerInfoWindo ...

  5. TP5.0学习历程（1）

    验证码的使用 控制器代码如下: $captcha = new \think\captcha\Captcha();         if (!$captcha->check($data['code ...

  6. thinkpadT480安装archlinux

    制作U盘启动盘 下载archlinux镜像 下载powerison 将镜像刻录到U盘中 设置bios 如果已经安装了win8+系统, 开机重启然后按f1,进入设置界面,加载启动项中将usb放到最前 保 ...

  7. rest-assured之如何指定请求数据(Specifying Request Data 包括请求参数、请求头、cookie等)

    我们除了可以为一个请求指定请求参数之外,还可以指定请求头(header).cookies.请求体(body)以及请求内容类型(content-type)等,下面我们就来一一介绍一下: 一.请求HTTP ...

  8. JAVA数据结构--AVL树的实现

    AVL树的定义 在计算机科学中,AVL树是最先发明的自平衡二叉查找树.在AVL树中任何节点的两个子树的高度最大差别为1,所以它也被称为高度平衡树.查找.插入和删除在平均和最坏情况下的时间复杂度都是.增 ...

  9. 向指定url发送请求与获取响应

    string url = @"https://www.baidu.com"; //向指定服务器发起请求 HttpWebRequest request = (HttpWebReque ...

  10. 使用app-inspector查看元素，无法连接到手机，提示错误{ Error: Command failed ……forward tcp:9001 tcp:9001错误解决

    在学习使用app-inspector查看元素时,碰到一个问题.在cmd窗口执行命令app-inspector --port 5678 -u 85EABNFSU53R --verbose  ,连接不到手 ...