jQuery点击滑出层效果代码实例

2018-7-12 23:29| 作者: antzone| 查看: 1363| 评论: 0|来自: 蚂蚁部落

本章节分享一段代码实例,它实现了点击滑出弹出层效果。

点击左上角的按钮,可以从上部以动画效果出现一个层效果,并且背景是半透明的。

代码实例如下:

[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()一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部