jQuery实现点击滑出层效果代码示例
分享一段代码实例，它实现了点击滑出弹出层效果。
点击左上角的按钮，可以从上部以动画效果出现一个层效果，并且背景是半透明的。
代码实例如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.gaodaima.com/" /> <title>jQuery实现点击滑出层效果代码示例-搞代码gaodaima.com</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://libs.baidu.com/jquery/1.9.0/jquery.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> |
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
|
1 2 3 4 5 6 |
.modal { position: absolute; left: 0; right: 0; z-index: -1; } |
上面的代码设置的是弹出层的容器。
设置元素绝对定位，并且left和right属性值为0，那么就是水平宽度全屏。
|
1 2 3 4 5 6 7 8 |
.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%
同事设置了动画过渡效果。
|
1 2 3 4 |
.fade.in { opacity: 1; top: 10%; } |
设置容器为不透明，并且top属性值为10%
这也就实现了弹出层渐现，并且从上面下滑效果。
$(function () {})，当文档结构完全加载完毕再去执行函数中的代码。
|
1 2 3 4 5 |
$(".start").on("click", function () { $(".modal").addClass("in"); $(".modal").css('z-index', '1001'); $(".modal-backup").css('display', 'block'); }) |
为按钮注册click事件处理函数。
添加class样式类in。
设置容器的z-index值为1001,也就是可以悬浮于背景半透明层之上。
并显示背景半透明层。
原创文章，转载请注明： 转载自搞代码
本文链接地址: jQuery实现点击滑出层效果代码示例
微信 赏一包辣条吧~
支付宝 赏一听可乐吧~
发表评论