编写弹窗 并居中
知识点: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>