<!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. 剖析String,StringBuffer,StringBuilder异同

    近在学习Java的时候,遇到了这样一个问题,就是String,StringBuilder以及StringBuffer这三个类之间有什么区别呢,自己从网上搜索了一些资料,有所了解了之后在这里整理一下,便 ...

  2. 测试误区《二》 python逻辑运算和关系运算优先级

    关系运算 关系运算就是对2个对象进行比较,通过比较符判断进行比较,有6种方式. x > y 大于 x >= y 大于等于 x < y 小于 x <= y 小于等于 x = y ...

  3. iPhone X会成为苹果最短命的旗舰机型吗？

    最近,有媒体报道有凯基证券分析师郭明琪在他的最新报告指出,iPhone X将在今年中结束生产.因为苹果已计划下半年推出新款iPhone,价格也比iPhone X会低并有新功能发布.所以他预计iPhon ...

  4. IT培训的背后，是“韭菜”的躺赚梦！

    作者:九歌 本文转自公众号:Hack 本文只谈"骗局",不谈其他,绝不引战,如有错误,希望指出我会及时改正 导语 为什么要写这篇文章呢,近些年培训这个话题也比较火,很多在看这篇文章 ...

  5. 下一个风口？迷你KTV能变成“绿巨人”吗

    近段时间,在全国各地多个商场.大学城等繁华地点,一种全新娱乐方式--迷你KTV变得火爆起来.这种仅能容纳两三人,以单首.时段等进行计费,且价格不低的点唱新模式,正成为投资者眼中的"新宠&qu ...

  6. 不同浏览器Cookie大小

    一.浏览器允许每个域名所包含的 cookie 数:Microsoft 指出 Internet Explorer 8 增加 cookie 限制为每个域名 50 个,但 IE7 似乎也允许每个域名 50 ...

  7. 手把手教你用 FastDFS 构建分布式文件管理系统

    说起分布式文件管理系统,大家可能很容易想到 HDFS.GFS 等系统,前者是 Hadoop 的一部分,后者则是 Google 提供的分布式文件管理系统.除了这些之外,国内淘宝和腾讯也有自己的分布式文件 ...

  8. 1——PHP常见的系统常量

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...

  9. 一篇文章带您读懂List集合（源码分析）

    今天要分享的Java集合是List,主要是针对它的常见实现类ArrayList进行讲解 内容目录 什么是List核心方法源码剖析1.文档注释2.构造方法3.add()3.remove()如何提升Arr ...

  10. RTL8812AU双频无线网卡在ubuntu19和20上的驱动安装

    旧爱已去 疫情在家,突然邻居敲门说,我这网上不了,帮下忙呗兄弟:兄弟都叫了,哥就冒回险,口罩扎起,一顿xxxx,原来是路由器没插到wlan口,看他拉网线可怜,就把我台式机上无线网卡送给他了,这就是又送 ...