<!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;
background: white;
border: 1px #000 solid;
position: absolute;
display: none;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
z-index: 200;
}
#close {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
$shadow = $('<div style="background:#000;opacity:0.5;width:100%;height:100%;z-index:20;"></div>');
$('#input1').click(function () {
$('body').append($shadow);
$('#login').toggle();
});
$('#close').click(function () {
$('#login').hide();
$shadow.remove();
});
$(window).on('resize scroll', function () {
$('#login').css('top', ($(window).height() - $('login').outerWidth()) / 2 + $(window).scrollTop());
})
var disX = 0;
var disY = 0;
$('#login').mousedown(function (ev) {
disX = ev.pageX - $(this).offset().left;
disY = ev.pageY - $(this).offset().top;
if ($('#login').setCapture) {
$('#login').setCapture();
}
$(document).mousemove(function (ev) {
$('#login').css('left', ev.pageX - disX);
$('#login').css('top', ev.pageY - disY);
})
$(document).mouseup(function () {
$(document).off();
});
});
});
</script>
</head>
<body style="height:2000px">
<input id="input1" type="button" value="登录" />
<div id="login">
<p>用户名:<input type="text" /></p>
<p>密码:<input type="text" /></p>
<div id="close">X</div>
</div>
</body>
</html>
