QQ登录
微博登录
GitHub登录点击代码右上角
查看演示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
button {
width: 50px;
height: 30px;
border:none;
background: #39c;
color: #fff;
border-radius: 5px;
margin-left: 30px;
}
.box {
position: absolute;
width: 300px;
height: 220px;
border: 1px solid #39c;
border-radius: 8px;
display: none;
background: #fff;
}
.title {
width: 100%;
height: 30px;
line-height: 30px;
background: #39c;
color: #fff;
text-align: center;
border-radius: 8px 8px 0 0;
}
.login {
width: 200px;
height: 200px;
margin: 0 auto;
}
input {
display: block;
width: 195px;
height: 30px;
font-size: 13px;
margin-top: 20px;
padding-left: 5px;
}
input:nth-of-type(3) {
width: 204px;
}
.dl {
border:none;
background: #39c;
color:#fff;
}
.close {
position: absolute;
top:5px;
right:5px;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
background: #39c;
opacity: .8;
color: #fff;
border: 1px solid #fff;
cursor: pointer;
}
.top {
position: fixed;
right: 30px;
bottom:55px;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
background: #39c;
color: #fff;
border-radius: 50%;
}
.la {
margin: 1500px 0 50px 30px;
color: #666;
}
</style>
</head>
<body>
<p><font color="#666">点击登录弹出登录框</font></p>
<button>登 录</button>
<p class="la">别拉了下面什么都没有(⊙o⊙)…</p>
<p class="la">都说了什么都没有啦٩(๑òωó๑)۶
<br>
<br>阁下真是个大笨蛋呢( σ'ω')σ</p>
<div class="box" style="display: none;">
<div class="title">用户登录</div>
<div class="close">×</div>
<div class="login">
<input type="text" name="" placeholder="请输入用户名">
<input type="password" name="" placeholder="请输入密码">
<input type="submit" class="dl" name="" value="登 录">
</div>
</div>
<a href="#">
<div class="top">↑</div>
</a>
<script type="text/javascript" src="https://lib.baomitu.com/jquery/3.2.1/jquery.min.js"></script>
<script id="rendered-js">
$(function () {
$("button").click(function () {
$(".box").css("display", "block");
$(".box").css("left", ($(window).width() - $(".box").outerWidth()) / 2);
$(".box").css("top", ($(window).height() - $(".box").outerHeight()) / 2);
});
$(window).on('resize scroll', function () {
$(".box").css('top', ($(window).height() - $(".box").outerHeight()) / 2 + $(window).scrollTop());
});
$(".close").click(function () {
$(".box").css("display", "none");
});
});
</script>
</body>
</html>参考：https://yaw.ee/1350.html
本站文章除注明转载/出处外，均为原创，若要转载请务必注明出处。转载后请将转载链接通过邮件告知我站，谢谢合作。本站邮箱：admin@only4.work
尊重他人劳动成果，共创和谐网络环境。点击版权声明查看本站相关条款。
