<!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. 【SQL Server】数据库是单个用户的 无法顺利进行操作 怎么解决

    1.打开数据库 2.新建查询 ,输入以下的SQL 语句 DECLARE @SQL VARCHAR(MAX); SET @SQL='' SELECT @SQL=@SQL+'; KILL '+RTRIM( ...

  2. Android拓展系列(11)--打造Windows下便携的Android源码阅读环境

    因为EXT和NTFS格式的差异,我一直对于windows下阅读Android源码感到不满. 前几天,想把最新的android5.0的源码下下来研究一下,而平时日常使用的又是windows环境,于是专门 ...

  3. Codeforces Round #375 (Div. 2) - D

    题目链接:http://codeforces.com/contest/723/problem/D 题意:给定n*m小大的字符矩阵.'*'表示陆地,'.'表示水域.然后湖的定义是:如果水域完全被陆地包围 ...

  4. express－19 路由2

    组织路由 在主应用程序文件中定义所有路由太笨重了.那样不仅会导致那个文件一直增长,还不利于功能的分离,因为那个文件里已经有很多东西了. 四条组织路由的指导原则 给路由处理器用命名函数: 到目前为止,我 ...

  5. Delphi中Messagedlg用法

    if MessageDlg('Welcome to my Delphi application. Exit now?', mtConfirmation, [mbYes, mbNo], 0) = mrY ...

  6. 短信猫 TIdTCPServer TIdTCPClient

    短信猫 服务端: IdTCPServer1: TIdTCPServer; IdAntiFreeze1: TIdAntiFreeze; unit UnitSever; interface uses Wi ...

  7. Linux 命令集合

    1.find /etc -name "*" | xargs grep "hello abcserver" 按照内容过滤2.grep -v "^#&qu ...

  8. details和summary

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. NoSQL-Redis【2】-实现分布式Session

    经过一周紧张的开发和调试,终于把Redis实现的分布式Session发布到了生产环境.我在本地测试了100万的数据,Redis的速度确实让我满意,期待在线上有更好的表现. 一.配置windows-se ...

  10. Codeforces Round #363 Div.2[111110]

    好久没做手生了,不然前四道都是能A的,当然,正常发挥也是菜. A:Launch of Collider 题意:20万个点排在一条直线上,其坐标均为偶数.从某一时刻开始向左或向右运动,速度为每秒1个单位 ...