您的位置：首页 > Web前端 > JQuery

jquery创建水平居中垂直居中弹出框

2017-02-13 16:09 381 查看
<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#login{
width: 300px;
height: 300px;
border: 1px solid red;
position: absolute;
}
#close{
position: absolute;
right: 5px;
top: 5px;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('#btn').on('click',function(){
var oContent=$('<div id="login"><p>用户名：<input type="text"/></p><p>密码：<input type="text" /></p><div id="close">X</div></div>');
$('body').append(oContent);
oContent.css('left',($(wind
4000
ow).width()-oContent.outerWidth())/2);
oContent.css('top',($(window).height()-oContent.outerHeight())/2);
$('#close').on('click',function(){
oContent.remove();
})
$(window).on('resize scroll',function(){
oContent.css('left',($(window).width()-oContent.outerWidth())/2);
oContent.css('top',($(window).height()-oContent.outerHeight())/2+$(window).scrollTop());
})
})
})
</script>
</head>
<body style="height: 800px;">
<input type="button" value="点击" id="btn" />
<!--<div id="login">
<p>用户名：<input type="text"/></p>
<p>密码：<input type="text" /></p>
<div id="close">X</div>
</div>-->
</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航