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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

*{ margin:0; padding:0;}

#login{ border:1px #000 solid; position:absolute; padding:20px }

#close{ position:absolute; right:0; top:0;}

</style>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

<script>

$(function(){

    $('#input1').click(function(){

        var oLogin = $('<div id="login"><p>用户名:<input type="text" /></p><p>密码:<input type="text" /></p><div id="close">X</div></div>');

        $('body').append( oLogin );

        oLogin.css('left' , ($(window).width() - oLogin.outerWidth())/2 );

        oLogin.css('top' , ($(window).height() - oLogin.outerHeight())/2 );

       $('#close').click(function(){

           oLogin.remove();

           });

        $(window).on('resize scroll',function(){

         oLogin.css('left' , ($(window).width() - oLogin.outerWidth())/2 );

         oLogin.css('top' , ($(window).height() - oLogin.outerHeight())/2 + $(window).scrollTop() );

        });

    });

});

</script>

</head>

<body style="height:2000px;">

<input type="button" value="点击" id="input1" />

<!--<div id="login">

    <p>用户名:<input type="text" /></p>

    <p>密码:<input type="text" /></p>

    <div id="close">X</div>

</div>-->

</body>

</html>

弹出层js让DIV居中的更多相关文章

  1. 页面DIV弹出层 JS原生脚本

    <script type="text/javascript"> /*         * 弹出DIV层         */ function showDiv() { ...

  2. JS 弹出层 定位至屏幕居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 弹出层js要这样加才不会失效

    $('body').on('click','.check_eln',function(){    $('#eln_show').toggleClass('hidden'); });

  4. 69.js--点击事件等比例弹出层div

    html:<!--弹出层导航栏--> <div class="public-nav-content"> <ul> <li><a ...

  5. jQuery.reveal弹出层

    jQuery.reveal弹出层使用 最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说 ...

  6. jQuery.reveal弹出层使用

    最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说了算. 这个插件是基于Jquery实现 ...

  7. jQuery点击弹出层，弹出模态框，点击模态框消失

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  8. Layer组件多个iframe弹出层打开与关闭及参数传递

    一.Layer简介 Layer是一款近年来备受青睐的web弹层组件,基于jquery,易用.实用,兼容包括IE6在内的所有主流浏览器,拥有丰富强大的可自定义的功能. Layer官网地址:http:// ...

  9. Bootstrap Modal多个弹出层顺序

    Bootstrap Modal多个弹出层顺序与div的顺序关联.后来者居上:即div靠后的modal层弹出的时候会在上层. 比如上图所示,模态框2弹出的时候会在模态框1上面.

随机推荐

  1. LoadRunner关联函数的脚本实例--如何操作关联参数

    LoadRunner关联函数的脚本实例--如何操作关联参数 这几天一直在学习LoadRunner的VuGen编程,今天想对关联函数web_reg_save_param做详细的试验和研究: ~f6p q ...

  2. POJ 2002 统计正方形 HASH

    题目链接:http://poj.org/problem?id=2002 题意:给定n个点,问有多少种方法可以组成正方形. 思路:我们可以根据两个点求出对应正方形[有2个一个在两点左边,一个在两点右边] ...

  3. 03 Javascript初识

    Javascript语言(★★★★★)      Javascript是基于对象和事件驱动的脚本语言,作用在客户端.              特点: * 交互性 * 安全性(不能访问本地的硬盘)   ...

  4. 简单的实现UIpicker上面的取消确定按钮

    1 因为我用的xib实现的添加picker 和textfiled的, @interface ViewController : UIViewController<UITextFieldDelega ...

  5. ZJOI2016二试+游记

    ...excited.... 一场打回原形爽哦. T1莫名爆到了10分,T2T3均没交,一个小时过后就没再拿任何分数,perfectly狗带了... 总之没有给自己充足的时间去敲暴力,ZJOI啊..拿 ...

  6. Python基础7- 流程控制之循环

    循环: 把一段代码重复性的执行N次,直到满足某个条件为止. 为了在合适的时候,停止重复执行,需要让程序出现满足停止循环的条件.Python中有三种循环(实质只有两种): while循环 for循环 嵌 ...

  7. zookeeper启动错误 transaction type: 2 error: KeeperErrorCode = NoNode for /hbase

    hbase伪分布式,与zookeeper同一台机器的时候,运行一段时间,启动zookeeper的时候,日志中有如下错误,导致无法启动zookeeper java.io.IOException: Fai ...

  8. Codeforces 607B Zuma（区间DP）

    题目大概说,有n个颜色的宝石,可以消除是回文串的连续颜色序列,问最少要几下才能全部消除. 自然想到dp[i][j]表示序列i...j全部消除的最少操作数 有几种消除的方式都能通过枚举k(i<=k ...

  9. URAL1018 Binary Apple Tree（树形DP）

    题目大概说一棵n结点二叉苹果树,n-1个分支,每个分支各有苹果,1是根,要删掉若干个分支,保留q个分支,问最多能保留几个苹果. 挺简单的树形DP,因为是二叉树,都不需要树上背包什么的. dp[u][k ...

  10. soapui中文操作手册(七)----Web Service Sample Project

    REST推理 这份简短的教程将引导您完成架构推断功能. 我们将创建一个新的项目,并添加一个REST服务,而初始WADL文件启动了. 发送请求后,我们就可以使用响应来构建我们的架构. 演示请求 为了演示 ...