<!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. LeetCode Day 12

    LeetCode0024 给定一个链表,两两交换其中相邻的节点,并返回交换后的链表. 你不能只是单纯的改变节点内部的值,而是需要实际的进行节点交换. 示例: 给定 1->2->3-> ...

  2. 翻转链表和k个一组翻转以及两两反转

    一.输入一个链表,输出反转后的链表. 非递归实现: # -*- coding:utf-8 -*- # class ListNode: # def __init__(self, x): # self.v ...

  3. 虚拟网卡 TUN/TAP 驱动程序设计原理（经典）

    盗用-收藏 简介 虚拟网卡Tun/tap驱动是一个开源项目,支持很多的类UNIX平台,OpenVPN和Vtun都是基于它实现隧道包封装.本文将介绍tun/tap驱动的使用并分析虚拟网卡tun/tap驱 ...

  4. python3之urllib代理池

    1.常见状态吗 301:重定向到新的URL,永久性302:重定向到临时URL,非永久性304:请求的资源未更新400:非法请求401:请求未经授权403:禁止访问404:没找到对应页面500:服务器内 ...

  5. HTML5 file API加canvas实现图片前端JS压缩并上传

    一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...

  6. mybatis的通用mapper小结

    import tk.mybatis.mapper.entity.Example; //此包是tk下的1.定义一个dao层接口不需要任何方法 需要继承Mapper<类型> 2.在servic ...

  7. struts2和springmvc性能比较2

    我们用struts2时采用的传统的配置文件的方式,并没有使用传说中的0配置.spring3 mvc可以认为已经100%零配置了(除了配置spring mvc-servlet.xml外). Spring ...

  8. [BZOJ 3144][HNOI 2013] 切糕

    题目大意 切糕是 (p times q times r) 的长方体,每个点有一个违和感 (v_{x, y, z}).先要水平切开切糕(即对于每个纵轴,切面与其有且只有一个交点),要求水平上相邻两点的切 ...

  9. windows的各种扩展名详解

    Windows系统文件按照不同的格式和用途分很多种类,为便于管理和识别,在对文件命名时,是以扩展名加以区分的,即文件名格式为: 主文件名.扩展名.这样就可以根据文件的扩展名,判定文件的种类,从而知道其 ...

  10. Docker容器时间同步问题

    具体操作: 为了保证容器和宿主机之间的时间同步,采用如下参数:-v /etc/localtime:/etc/localtime:ro但是在页面访问的时候时间依然相差8个小时: 该怎么破解! 回复: 1 ...