juery 弹出框
2024-08-30 02:42:44
<!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>
最新文章
- node.js + webstorm :配置开发环境
- 直接拿来用!十大Material Design开源项目
- Eclipse下Android开发的问题:Failed to install AndroidPhone.apk on device &#39;emulator-5554&#39;: timeout 解决办法
- oracle10g如何配置客户端
- ionic中登陆逻辑控制
- Android(java)学习笔记80:UDP协议发送数据
- java连接mysql数据库(jsp显示和控制台显示)
- java学习之网络编程之echo程序
- Hibernate基础学习(七)&mdash;检索方式
- 修改访问的后缀contant
- 「工具」Aquarelo - 来自意大利的色阶管理工具
- pyspider 初次使用
- jexus独立版设置支持https
- Python,是什么让我遇见你
- html:input的type=number的时候maxlength失效问题
- Java同步(Synchronization)
- 最新最全的Java面试题整理(内附答案)
- Activiti图表bpmn对应的xml文件
- 做JAVA开发的同学一定遇到过的爆表问题,看这里解决
- [算法导论]插入排序 @ Python
热门文章
- ASP.NET ASHX 一般处理程序教程
- vivado操作基本问题
- C++ 部分STL
- python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
- 吴裕雄--天生自然python学习笔记:Python3 数据结构
- php 正则获取html任意标签
- Servlet.service() for servlet [appServlet] in context with path [/item] threw exception [Request processing failed
- JAVA WEB期末项目第二阶段成果
- Mysql数据导出到excel-基于python
- 从又一家外卖被Uber收购,看美团打车未来