#jquery 和 animate 封装一个带动画的弹框
程序员文章站
2022-05-31 13:26:17
...
jquery 和 animate 封装一个带动画的弹框
前言：前段时间在做一个ERP系统的时候，看到ui图，和需求，发现页面中有好多个弹层，刚开始的时候是用最简单的,设置一个灰色层，相对于窗口进行定位，然后弹框设置display为none来隐藏，block来显示。作为一个有追求的前端开发人员，显然这是不符合我的追求，所以在晚上空余的时间的时候，研究了下animate的动画，并且配合jquery来封装一个带动画的弹框。引入jquery和animate.css
设计思想：一般情况下我们点出一个弹出层，然后关闭它时，可以用过点击’X’或者点击取消或者点击弹出框外面的页面，传入进入和出去时所需的动画。
代码下载地址：https://github.com/Hugo-Jiang/jquery-animate 如果感觉可以给个赞哦！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>利用jauery+animate封装一个常用的弹层<</title>
<link rel="stylesheet" href="animate.css">
<style>
/*灰色层相对于body行进定位，并设置它的层级为998，灰色层刚开始时，隐藏*/
#mask {
background-color: #000;
opacity: .5;
position: absolute;
left: 0;
top: 0;
z-index: 998;
display: none;
}
/*弹出框刚开始隐藏，相对于窗口进行定位，但是它的层级一定要比灰色层的层级高*/
#popup {
position: fixed;
width: 300px;
height: 330px;
z-index: 999;
background-color: #fff6e2;
border-radius: 15px;
box-shadow: 0 5px 6px #ccc;
display: none;
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(function () {
// 设计思想： 一般情况下我们点出一个弹出层，然后关闭它时，可以用过点击'X'或者点击取消或者点击弹出框外面的页面
function showPopup(id,className,inter,outer) {
var mask = $('#mask');
var popup = $('#'+id);
var bWidth = $(document.body).outerWidth(true);//获取body的宽度，传递参数true,包括外边距,则宽度=padding+border+margin
var bHeight = $(document.body).outerHeight(true);//跟上面相似
var cHeight = $(window).height(); //获取浏览器的可视区高度
var pWidth = popup.width(); // 弹出款的宽度
var pHeight = popup.height(); //弹出框的高度
var left = (bWidth-pWidth)/2; //计算相对于窗口定位的时，left值
var top = (cHeight-pHeight)/2; //------------------，top---
// 设置灰色层的，高度和宽度必须等于body的宽度，不然在鼠标滚动的时候，会出现非灰色层
//console.log(222);
popup.removeClass(inter);
popup.removeClass(outer);
mask.css({
'display': 'block',
'width': bWidth + 'px',
'height': bHeight + 'px'
});
popup.css({
'display': 'block',
'top': top + 'px',
'left': left + 'px'
}).addClass(inter);//进入时的动画
//console.log(popup.removeClass(outer));
$('.' + className).unbind('click').click(function () {
closePopup()
});
mask.unbind('click').click(function () {
closePopup();
});
function closePopup() {
mask.hide();
popup.addClass(outer);
setTimeout(function () {
popup.hide();
},500)
}
}
$('#btnLogin').unbind('click').click(function () {
showPopup('popup', 'btn1','rotateInDownLeft','rotateOutDownLeft');
return false;
});
})
</script>
</head>
<body>
<div id="mask"></div>
<div style="width: 1000px;height: 900px;">
<button id="btnLogin">btnLogin</button>
</div>
<div id="popup" class="animated">
<button class="btn1">关闭</button>
</div>
</body>
</html>下一篇： bootstrap警告框