jQuery點選滑出層效果程式碼例項

antzone發表於2018-07-12
jQuery

本章節分享一段程式碼例項，它實現了點選滑出彈出層效果。

點選左上角的按鈕，可以從上部以動畫效果出現一個層效果，並且背景是半透明的。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}
html {
  font-size: 62.5%;
}
a {
  text-decoration: none;
}
body {
  width: 100%;
  font-family: "mircoft yahei";
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1;
}
a.start {
  display: inline-block;
  padding: 8px 16px;
  background-color: red;
  color: white;
}
.modal {
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
}
.fade {
  opacity: 0;
  top: -10%;
  display: block;
  -webkit-transition: top 0.3s linear;
  -o-transition: top 0.3s linear;
  transition: top 0.3s linear;
}
.fade.in {
  opacity: 1;
  top: 10%;
}
.modal-body {
  width: 80%;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 3px;
}
.modal-title {
  position: relative;
  height: 40px;
  background-color: #D31145;
  line-height: 40px;
  border-bottom: 1px solid #ccc;
}
a.close {
  display: inline-block;
  position: absolute;
  font-size: 2.8rem;
  color: #ddd;
  top: 2px;
  right: 10px;
}
.modal-backup {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: none;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function () {
  $(".start").on("click", function () {
    $(".modal").addClass("in");
    $(".modal").css('z-index', '1001');
    $(".modal-backup").css('display', 'block');
  });
  $(".close").on("click", function () {
    $(".modal").removeClass('in');
    $(".modal").css('z-index', '-1');
    $(".modal-backup").css('display', 'none');
  });
})
</script>
</head>
<body>
<a class="start" href="javascript:;">點選</a>
<div class="modal fade">
  <div class="modal-body">
    <div class="modal-header">
      <div class="modal-title">
        <span>標題</span>
        <a class="close" href="#">×</a>
      </div>
    </div>
    <div class="modal-content">螞蟻部落</div>
  </div>
</div>
<div class="modal-backup"></div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
.modal {
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
}

上面的程式碼設定的是彈出層的容器。

設定元素絕對定位，並且left和right屬性值為0，那麼就是水平寬度全屏。

[CSS] 純文字檢視 複製程式碼
.fade {
  opacity: 0;
  top: -10%;
  display: block;
  -webkit-transition: top 0.3s linear;
  -o-transition: top 0.3s linear;
  transition: top 0.3s linear;
}

設定容器元素全透明。

並且top屬性值是-10%

同事設定了動畫過渡效果。

[CSS] 純文字檢視 複製程式碼
.fade.in {
  opacity: 1;
  top: 10%;
}

設定容器為不透明，並且top屬性值為10%

這也就實現了彈出層漸現，並且從上面下滑效果。

$(function () {})，當文件結構完全載入完畢再去執行函式中的程式碼。

[JavaScript] 純文字檢視 複製程式碼
$(".start").on("click", function () {
  $(".modal").addClass("in");
  $(".modal").css('z-index', '1001');
  $(".modal-backup").css('display', 'block');
})

為按鈕註冊click事件處理函式。

新增class樣式類in。

設定容器的z-index值為1001,也就是可以懸浮於背景半透明層之上。

並顯示背景半透明層。

二.相關閱讀:

（1）.on()參閱jquery on()一章節。

（2）.addClass()參閱jQuery addClass()一章節。

（3）.css()參閱jQuery css()一章節。

（4）.removeClass()參閱jQuery removeClass()一章節。

相關文章