<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
margin:0;
padding:0;}
#login{
width:400px;
height:300px;
position:absolute;
border:1px #CCCCCC solid;
padding:15px;
}
#close{
position:absolute;
right:0px;
top:0px;
cursor:pointer; }
</style>
<script type="text/javascript" src="jquery-1.11.2.js"></script>
<script>
$(function ()
{
$('#btn').click(function ()
{
var ologin = $('<div id="login"><p>用户名：<input type="text"></p><p>密码：<input type="password"></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).scrollTop()); $('#close').click(function ()
{
ologin.remove();
})
})
})
</script>
</head> <body>
<input type="button" id="btn" value="点击"> </body>
</html>