<!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{width:300px;height:300px;border:1px solid black;position:relative;}

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

</style>

<script type="text/javascript" src="jquery-1.10.1.min.js"></script>

<script>

    $(function(){

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

            var oLogin = $('<div id="login"><p>用户名：<input type="text" value="" id="input2"/></p><p>密码：<input type="text" value="" id="input2"/></p><span id="close">x</span></div>'); //juery 创建元素<> 注意不要留有空格

        $('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"/>

</body>

</html>

juery 弹出框的更多相关文章

  1. 关于Layer弹出框初探

    layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,laye ...

  2. angularjs 弹出框 $modal

    angularjs 弹出框 $modal 标签: angularjs 2015-11-04 09:50 8664人阅读 评论(1) 收藏 举报  分类: Angularjs(3)  $modal只有一 ...

  3. 【代码笔记】iOS-自定义弹出框

    代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. [s ...

  4. Android----消息弹出框

    关于Android的知识,自从工作了就没有什么时间去总结学习过的知识,我个人比较喜欢学习后总结,今天就写一下关于android中消息弹出框的几种方式的简单示例,按照自己的思路写了一段,希望对和我一样在 ...

  5. bootstrap中popover.js(弹出框)使用总结+案例

    bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...

  6. div非弹出框半透明遮罩实现全屏幕遮盖css实现

    IE浏览器下设置元素css背景为透明: background-color: rgb(0, 0, 0); filter: alpha(opacity=20); 非IE浏览器下设置元素css背景为透明: ...

  7. Visual Studio 打开解决方案后 弹出框显示 "正在打开文件..." 迟迟没反应 的解决方法

    Visual Studio 打开解决方案后 弹出框显示 "正在打开文件...",任务管理器的devenv进程又很正常,不会显示"未响应". 而IDE的左下角有个 ...

  8. 使用jsonp跨域调用百度js实现搜索框智能提示，并实现鼠标和键盘对弹出框里候选词的操作【附源码】

    项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript ...

  9. JS组件系列——Bootstrap寒冬暖身篇：弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

随机推荐

  1. python初认函数

    今日所得 函数基本使用 函数的参数 函数的返回值 # 函数内要想返回给调用者值 必须用关键字return """ 不写return 只写return 写return No ...

  2. JVM核心组成部分与作用介绍

    jvm由多个部分组成运作的 1.class loader类加载器: 加载类到内存里面,Class loader只需负责加载. 符合条件结构就加载到里面跑, 是否能运行顺利或者有没有错误异常,则需要Ex ...

  3. delicate|definite|density|deny doing|draw up |draw on|no equal for|establish|equipped|

    ADJ-GRADED 技巧性很强的;注重细节的A delicate task, movement, action, or product needs or shows great skill and ...

  4. linux系统下rpm包的安装、删除、效验、查询

    详细课程 使用 RPM RPM 有五个基本的操作 模式(不包括包的编译): 安装,卸载,升级,查询,校验.本节将对它们一一介绍.要了解完整的细节和选项,可以使用 rpm --help, 或转到 the ...

  5. 暑假集训第六周contest1

    51Nod - 1413 权势二进制 题意:就是讲给出一个数n,让你求最少由多少个像0,1,10,11......这样的二进制数相加构成:样例n=9就是由9个二进制1相加组成,我不懂比赛的时候我为什么 ...

  6. Mongdb创建 连接过程

    在bin目录下启动后 Show dbs 显示库,库里有内容才会显示库名称 Use admin 切换库 没有的默认创建 show users显示用户信息 Show collections显示表名 db. ...

  7. mysqldump: Got error: 1449: The user specified as a definer ('user'@'%') does not exist when using LOCK TABLES

    报错:一个库用mysqldump -u -p --opt --force -e --max_allowed_packet= --net_buffer_length= --databases备份时报错如 ...

  8. Java程序监控---Metrics

    概念 Metrics是一个给JAVA服务的各项指标提供度量工具的包,在JAVA代码中嵌入Metrics代码,可以方便的对业务代码的各个指标进行监控 目前最为流行的 metrics 库是来自 Coda ...

  9. 从5个经典工作开始看语义SLAM

    本文试图概括Semantic SLAM的主要思路和近年工作,⻓期更新.但因水平有限,若有错漏,感谢指正. (更好的公式显示效果,可关注文章底部的公众号) Semantic SLAM 简介 至今为止,主 ...

  10. 网络地址转换NAT与端口地址转换PAT

    网络地址转换NAT与端口地址转换PAT 一.网络地址转换 NAT (Network Address Translation) 1.1.网络地址转换简介 需要在专用网(内网)连接到因特网的路由器上安装 ...