點選彈出帶有灰色背景使用者登入視窗程式碼例項

antzone發表於2017-04-18

本章節分享一段程式碼例項，它實現了點選按鈕彈出使用者登入視窗的功能。

並且這個登入視窗帶有半透明遮罩層效果，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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()一章節。

相關文章