<!DOCTYPE html>;
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title>弹窗</title>
<script type=
"text/javascript"
src=
"../jquery-3.2.1.min.js"
></script>
<style type=
"text/css"
>
*{margin: 0px;padding: 0px;}
#login{height:300px;width: 300px;border: 1px solid #ddd;position: absolute; }
#close{position: absolute;right: 0px;top: 0px;}
</style>
<script type=
"text/javascript"
>
$(
function
(){
$('input').click(
function
(){
var
oLogin=$('<p id=
"login"
><p>用户名<input type=
"text"
></p><p>密码<input type=
"text"
></p><p id=
"close"
>X</p></p>');
$('body').append(oLogin);
oLogin.css('left',($(window).width()-oLogin.outerWidth())/2);
oLogin.css('top',($(window).width()-oLogin.outerHeight())/2);
$(
"#close"
).click(
function
(){
oLogin.remove();
})
$(window).on(
"resize scroll"
,
function
(){
oLogin.css('left',($(window).width()-oLogin.outerWidth())/2+$(window).scrollLeft());
oLogin.css('top',($(window).width()-oLogin.outerHeight())/2+$(window).scrollTop());
})
});
});
</script>
</head>
<body>
<input type=
"button"
value=
"点击"
>
<!-- <p id=
"login"
>
<p>用户名<input type=
"text"
></p>
<p>密码<input type=
"text"
></p>
<p id=
"close"
>X</p>
</p> -->
</body>
</html>