点击弹出带有灰色背景用户登录窗口代码实例

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现了点击按钮弹出用户登录窗口的功能。

并且这个登录窗口带有半透明遮罩层效果,代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
font-family: "微软雅黑";
}
.pop {
font-size: 24px;
}
.bg {
z-index: 99;
background: #000;
opacity: 0.3;
width: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
}
.box {
display: none;
z-index: 100;
width: 400px;
height: 200px;
position: absolute;
top: 40%;
left: 30%;
background-color: #F2F2F2;
border-radius: 8px;
}
.header {
width: 100%;
height: 30px;
background-color: #0275D8;
border-radius: 8px;
}
.header > span {
font-size: 16px;
line-height: 30px;
padding-left: 10px;
color: #eee;
}
.header > a {
display: block;
height: 30px;
line-height: 30px;
float: right;
color: white;
text-decoration: none;
padding-right: 10px;
font-family: "微软雅黑";
}
.header > a:hover {
color: #FC4043;
}
.container {
margin: 20px auto;
width: 300px;
padding: 6px;
}
.container > p {
font-size: 14px;
width: 250px;
margin: 10px auto;
text-align: center;
}
.container > p > span {
width: 45px;
background-color: #0275D8;
height: 20px;
margin-right: 5px;
padding: 4px;
border-radius: 4px;
}
.container > p > input {
height: 26px;
border-radius: 4px;
}
.container > p > .login {
text-decoration: none;
display: block;
width: 60%;
font-size: 18px;
line-height: 18px;
margin: 0 auto;
background-color: #21C95F;
color: #eef;
padding: 6px;
border-radius: 4px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function () {
var oBg = $("#bg");
var oBox = $("#box");
var oClose = $("#close");
var oPop = $("#pop");
var oHeader = $("#header");
var oUser = $("#user");
oUser.focus(function () {
if (oUser.val() == "请输入账号") {
oUser.val("");
}
});
oUser.blur(function () {
if (oUser.val() == "") {
oUser.val("请输入账号");
}
});
oPop.click(function () {
oBox.fadeIn("fast");
oBg.css({
"display": "block",
"height": $(document).height(),
});
oPop.hide();
});
oClose.click(function () {
oBox.fadeOut("fast");
oBg.css({
"display": "none",
"height": $(document).height(),
});
oPop.show();
});
oHeader.mousedown(function (event) {
var boxX = event.pageX - parseInt(oBox.position().left);
var boxY = event.pageY - parseInt(oBox.position().top);
$(document).mousemove(function (event) {
var xx = event.pageX - boxX;
var yy = event.pageY - boxY;
if (xx < 10) {
xx = 0;
} else if (xx >= $(window).width() - oBox.width()) {
xx = $(window).width() - oBox.width();
}
if (yy < 10) {
yy = 0;
} else if (yy >= $(window).height() - oBox.height()) {
yy = $(window).height() - oBox.height();
}
oBox.css({
"top": yy + "px",
"left": xx + "px",
});
});
$(document).mouseup(function () {
$(document).unbind("mousemove");
})
});
});
</script>
</head>
<body>
<a href="javascript:;" id="pop">弹出窗口</a>
<div id="bg" class="bg"></div>
<div id="box" class="box">
<div class="header" id="header">
<span>提示窗口</span>
<a href="javascript:;" id="close">关闭</a>
</div>
<div class="container">
<p><span>账号</span><input type="text" value="请输入账号" /></p>
<p><span>密码</span><input type="password" /></p>
<p><a href="javascript:;" class="login">登录</a></p>
</div>
</div>
</body>
</html>

上面的代码实现了我们的要求,更多内容可以参阅相关阅读。

相关阅读:

(1).fadeOut()可以参阅jQuery fadeOut()一章节。

(2).css()可以参阅jQuery css()一章节。

(3).parseInt()可以参阅javascript parseInt() 一章节。

(4).position()可以参阅jQuery position()一章节。

点击弹出带有灰色背景用户登录窗口代码实例,这样的场景在实际项目中还是用的比较多的,关于点击弹出带有灰色背景用户登录窗口代码实例就介绍到这了。

点击弹出带有灰色背景用户登录窗口代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容