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

最新推荐文章于 2023-03-05 00:29:20 发布

qq_37467814

最新推荐文章于 2023-03-05 00:29:20 发布

阅读量439

点赞数

分类专栏： jquery 文章标签：弹出框

本文链接：https://blog.csdn.net/qq_37467814/article/details/55049901

版权

jquery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!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',($(window).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" />

</body>
</html>

qq_37467814

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery创建水平居中垂直居中弹出框

*{margin: 0;padding: 0;}#login{width: 300px;height: 300px;border: 1px solid red;position: absolute;}#close{position: absolute;right: 5px;top: 5px;}$(function(){$(
复制链接

扫一扫

专栏目录