<!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. MSSS攝影大賽計劃書（第三版）

    比賽內容:對香港的城市風景以及自然風光的攝影 預期成果: 提升同學對香港的認識,鼓勵學生走出大學學園去瞭解香港,同時豐富會員的課餘活動,培養同學的興趣愛好 比賽時間:4月1-15日 最後作品提交時間: ...

  2. pycharm全局搜索快捷键无反应

    原因:和搜狗输入法的快捷键冲突

  3. 吴裕雄--天生自然 R语言开发学习：高级编程

    运行的条件是一元逻辑向量(TRUE或FALSE)并且不能有缺失(NA).else部分是可选的.如果 仅有一个语句,花括号也是可以省略的. 下面的代码片段是一个例子: plot(x, y) } else ...

  4. Holer一款局域网服务器代理到公网的内网映射工具

    Holer简介 Holer是一个将局域网服务器代理到公网的内网映射工具,支持转发基于TCP协议的报文. 相关链接 开源地址:https://github.com/Wisdom-Projects/hol ...

  5. Windows server 2008 r2下安装sqlserver2012

    在微软官网上下载sqlserver2012镜像文件:用Alcohol 120%软件进行驱动安装. 如果C盘的容量不够的话,上边的路径可以修改

  6. 在dataframe添加1行（首行，或者尾部），且不覆盖

    如果直接用下面的代码添加第1行,则会覆盖掉原来的第1行. #指定位置增加一行: df.loc[0]={'a':1,'b':2} 正确方法: 新建一个同样的 dataframe, 然后合并两个dataf ...

  7. SpringMVC之reset风格和form表单格式的curd

    CRUD c:create创建 r:retieve:查询 u:update:修改 d:delete:删除 rest /emp/1 get 代表查询id为1的员工 /emp/1 put 代表修改id为1 ...

  8. Android多模块混淆的问题

    Android在多模块或者组件化的时候,关于混淆的管理,一般常见的做法就是两条. 把所有的混淆规则规则都放在app模块下面,由app统一管理.这样就会有一个问题,就是到会导致混淆规则的冗余. 由mod ...

  9. 「知乎」对中国用户而言，Pure Android 是否比 MIUI 或 Flyme 体验更好？ - Donnie的博客

    这篇文章转载自我在知乎上的回答 哎呀-不要站队嘛.其实这是一个很有意思的题目,让我们一点点来看 哦对,谢妖-.本人是Nexus 5用户,系统当然是Pure Android KitKat啦(臭谷粉!点D ...

  10. 快速入门和查询Python

    评分: 4.5 作者: Ryan Lu 类别:Python 时间: 1. 注释 三种方式: 单行注释以 # 开头 多行注释用三个单引号 ''' 将注释括起来 多行注释用三个双引号 "&quo ...