juery 弹出框
<!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 弹出框的更多相关文章
- 关于Layer弹出框初探
layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,laye ...
- angularjs 弹出框 $modal
angularjs 弹出框 $modal 标签: angularjs 2015-11-04 09:50 8664人阅读 评论(1) 收藏 举报 分类: Angularjs(3) $modal只有一 ...
- 【代码笔记】iOS-自定义弹出框
代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. [s ...
- Android----消息弹出框
关于Android的知识,自从工作了就没有什么时间去总结学习过的知识,我个人比较喜欢学习后总结,今天就写一下关于android中消息弹出框的几种方式的简单示例,按照自己的思路写了一段,希望对和我一样在 ...
- bootstrap中popover.js(弹出框)使用总结+案例
bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...
- div非弹出框半透明遮罩实现全屏幕遮盖css实现
IE浏览器下设置元素css背景为透明: background-color: rgb(0, 0, 0); filter: alpha(opacity=20); 非IE浏览器下设置元素css背景为透明: ...
- Visual Studio 打开解决方案后 弹出框显示 "正在打开文件..." 迟迟没反应 的解决方法
Visual Studio 打开解决方案后 弹出框显示 "正在打开文件...",任务管理器的devenv进程又很正常,不会显示"未响应". 而IDE的左下角有个 ...
- 使用jsonp跨域调用百度js实现搜索框智能提示,并实现鼠标和键盘对弹出框里候选词的操作【附源码】
项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript ...
- JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
随机推荐
- JavaScript学习总结(八)正则表达式
转自:http://segmentfault.com/a/1190000000699097 基本概念 正则表达式是一种文本模式,包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为“元字符”) ...
- telnet不是内部或外部命令的问题解决
在windows DOS 命令窗口中输入telnet命令,出现如下提示信息: 可能是没有安装telnet客户端的原因,又得开始捣鼓了 www.2cto.com 依次点击"开 ...
- 安装centos7后不能联网
我们在安装centos的minimal版本后,在使用yum安装工具时会提示:cannot find a valid baseurl or repo:base/7/x86_64 这是因为不能联网导致的, ...
- dubbo分布式框架下web层调用业务层一直报空指针异常的解决办法
java.lang.NullPointerException............... 环境:SSM(通用mapper)+Dubbo 1.检查导包 提示注解@Reference 应该导入 im ...
- 吴裕雄--天生自然KITTEN编程:小猫解题
作品链接:https://ide.codemao.cn/we/36447034
- GPU PassThrough in KVM
实现步骤 环境 OS: # cat /etc/redhat-release CentOS Linux release 7.3.1611 (Core) # uname -a Linux hyhive 3 ...
- [PHP] 报错和“@” - 工作
以下几点关于报错和@的关系理解 在PHP中使用@加在某个语句前面,可以抑制错误在脚本的执行过程中输出到IO: 如果在某个语句上使用了@,则可以将语句内的各种嵌套的脚本可能存在的报错都会被抑制住: 如果 ...
- iPhone X会成为苹果最短命的旗舰机型吗?
最近,有媒体报道有凯基证券分析师郭明琪在他的最新报告指出,iPhone X将在今年中结束生产.因为苹果已计划下半年推出新款iPhone,价格也比iPhone X会低并有新功能发布.所以他预计iPhon ...
- 部署描述符web.xml
部署描述符应用场景 需要传递初始参数给ServletContext 有多个过滤器,并要指定调用顺序 需要更改会话超时设置 要限制资源的访问,并配置用户身份验证方式 xsi:schemaLocation ...
- RocketMQ 单机版安装并测试
一.安装maven 1.下载maven,http://maven.apache.org/download.cgi,并解压: -bin.tar.gz 2.修改系统环境变量,并验证: vim /etc/p ...