<!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. 【SSH】 之 Struts2

    (一)Struts2是什么? Struts2是一个基于MVC设计模式的Web应用框架,它本质上相当于一个servlet,在MVC设计模式中,Struts2作为控制器(Controller)来建立模型与 ...

  2. 梳理源码中 View 的工作原理

    欢迎Follow我的GitHub, 关注我的掘金. 在View的工作过程中, 执行三大流程完成显示, 测量(measure)流程, 布局(layout)流程, 绘制(draw)流程. 从perform ...

  3. LoadRunner性能测试执行过程的问题

    LoadRunner做性能测试 从设计到分析执行 执行测试并分析调优: 测试中报错的信息解决: 1. Failed to connect to server "域名:80": [1 ...

  4. css新增选择器

  5. 使用openface（linux）

    在github上搜索openface,clone下来; 按照requirement.txt中安装需要的项: sudo apt-get install .... sudo pip install ... ...

  6. [工作中的设计模式]适配器模式adapter

    一.模式解析 适配器模式把一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能够在一起工作. 也就是说,如果已经写好了一个接口,但是又来了一种截然不同的接口,如 ...

  7. dubbo服务治理框架设计

    dubbo.JSF作为使用最广泛的服务端框治理架,其设计和实现思想值得进行学习研究. 整个服务管理框架核心的原理基于反射以及socket调用实现,服务管理框架包含服务的注册管理 服务的索引管理以及服务 ...

  8. three.js右手坐标系， 显示和线条

    1.右手坐标系 Threejs使用的是右手坐标系,这源于opengl默认情况下,也是右手坐标系.下面是右手坐标系的图例,如果对这个概念不理解,可以百度一下,我保证你伸出手比划的那一瞬间你就明白了,如果 ...

  9. HDU5461 Largest Point（暴力）

    这题第一眼就想到暴力.. 枚举每一个ti,就能确定tj,tj一定是剩下数最大或最小的.为了求tj就要求出数列最大最小次大次小.时间复杂度O(n). 感觉暴力挺有趣的. #include<cstd ...

  10. BZOJ3346 : Ural1811 Dual Sim Phone

    首先将边进行去重,那么有$n\geq\sqrt{m}$. 然后二分答案,转化为判定是否存在两个点它们的出边集合的并集为全集. 那么这两个点必然满足$deg_x+deg_y\geq n$. 不妨设$de ...