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

快乐打工仔发布于 2年前分类：实例代码

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

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

<!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>

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