<!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. java学习笔记（2）：获取文件名和自定义文件过滤器

    //自定义文件过滤器import java.io.File; import javax.swing.filechooser.*; public class JavaChooser extends Fi ...

  2. 孙鑫VC学习笔记：多线程编程

    孙鑫VC学习笔记:多线程编程 SkySeraph Dec 11st 2010  HQU Email:zgzhaobo@gmail.com    QQ:452728574 Latest Modified ...

  3. 【java基础】选择排序and冒泡排序

    前言 : 今天学习的是J2SE视频里的第五章,数组部分,它里面留了一个经典的作业,就是让我们去从1倒9按一定规格排序,这让我想起了学习vb的时候最最让我头疼的两种排序方法,选择排序法 和 冒泡排序法. ...

  4. Android打包的那些事

    使用gradle打包apk已经成为当前主流趋势,我也在这个过程中经历了各种需求,并不断结合gradle新的支持,一一改进.在此,把这些相关的东西记录,做一总结. 1. 替换AndroidManifes ...

  5. a与a:link、a:visited、a:hover、a:active

    原文地址http://www.cnblogs.com/exmyth/p/3226654.html a与a:link.a:visited.a:hover.a:active   起因: a与a:link的 ...

  6. 归并排序（Merge Sort）

    归并排序是建立在归并操作上的一种有效的排序算法,该算法是采用分治法(Divide and Conquer)的一个非常典型的应用.将已有序的子序列合并,得到完全有序的序列:即先使每个子序列有序,再使子序 ...

  7. Java学习——开端

    学号 <Java程序设计>第1周学习总结(1) 教材学习内容总结(第一章) Java最早是由Sun公司研发,原称Oak(橡树),开发者之一的James Gosling被尊称为Java之父. ...

  8. 建立Maven工程时出错，Failure to transfer com.thoughtworks.xstream:xstream:jar:1.3.1

    Failure to transfer com.thoughtworks.xstream:xstream:jar: from http://repo1.maven.org/maven2 was cac ...

  9. word多级编号，如何让第一级为大写“一”，其他级别均为小写1.

    自定义里面设置了第一级为大写,2级.3级首字跟着变为大写,是因为2.3级没有勾选"正规形式编号",如图:

  10. HDU 3074 (线段树+模P乘法)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=3074 题目大意:单点更新.维护序列乘法.mod 1000000007. 解题思路: 10000000 ...