<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery-创建弹出框</title>
<style>
*{margin:0; padding: 0;}
#login{ width: 300px; height: 300px; border: 1px solid red; position: relative;}
#close{width: 20px; height: 20px;background: red; position: absolute; right: 0; top:0; text-align: center;}
</style>
//<script src='引入script库'></script>
<script>
$(function(){ $('#input1').click(function(){ var ologin=$('<div id="login"><p>用户名:<input type="text"/></p><p>密码:<input type="text"/></p><div id="close">x</div> </div>')
$('body').append(ologin); ologin.css('left', ($(window).width()-ologin.outerWidth())/2);
ologin.css('top', ($(window).height()-ologin.outerHeight())/2); $(window).on('scroll resize', function(){
ologin.css('left', ($(window).width()-ologin.outerWidth())/2);
ologin.css('top', ($(window).height()-ologin.outerHeight())/2+$(window).scrollTop());
});
$('#close').click(function(){ologin.remove();});
})
});
</script>
</head>
<body style="height: 2000px;">
<input type="button" value="点击" id="input1"/>
<!-- <div id="login">
<p>用户名：<input type="text"/></p>
<p>密码：<input type="text"/></p>
<div id="close">x</div>
</div> --> </body>
</html>