编写弹窗并居中

最新推荐文章于 2024-10-01 20:12:28 发布

weixin_30731287

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量70

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/annie211/p/5855625.html

版权

知识点：1、字符创不能分行写；

　　　　2、div在窗口中居中的方法：让div的left和top分别为：($(window).width()-$("div").width())/2;($(window).height()-$("div").height())/2;

　　　　3、当窗口滚动或者调整大小时，让div的left和top分别为在原来的基础上加上滚动距离：$(window).scrollLeft()和$(window).scrollTop()

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
body{height:2000px;}
#login{width:300px;height:300px;border:1px solid #000;position:absolute;}
#close{position:absolute;top:0;right:0;}
</style>
<title>编写弹窗并居中</title>
<script src="jquery.min.js"></script>
<script>
$(function(){
　　var bd=$("body");
　　var btn=$('<input type="button" value="点击">');
　　bd.append(btn);
　　btn.click(function(){
　　　　var log=$('<div id="login"><label for="user">用户名：<input type="text" name="user"></label><br><label for="pass">密码：<input 　　　　　type="password" name="pass"></label><br><div id="close">X</div></div>');
　　bd.append(log);
　　$("#close").click(function(){
　　log.remove();
　　});
　　log.css('left',($(window).width()-log.outerWidth())/2);
　　log.css('top',($(window).height()-log.outerHeight())/2);

　　$(window).on("resize scroll",function(){
　　log.css('left',($(window).width()-log.outerWidth())/2);
　　log.css("top",($(window).height()-log.outerHeight())/2+$(window).scrollTop());
　　　　});
　　});
});
</script>
</head>
<body>
</body>
</html>