#jquery 和 animate 封装一个带动画的弹框

最新推荐文章于 2024-05-15 10:06:00 发布

一只鱼_

最新推荐文章于 2024-05-15 10:06:00 发布

阅读量728

点赞数 1

分类专栏： Javascript jquery 文章标签： jquery弹框 animate动画弹框插件

本文链接：https://blog.csdn.net/sinat_31102083/article/details/78270179

版权

Javascript 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

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>

一只鱼_

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
#jquery 和 animate 封装一个带动画的弹框

jquery 和 animate 封装一个带动画的弹框前言：前段时间在做一个ERP系统的时候，看到ui图，和需求，发现页面中有好多个弹层，刚开始的时候是用最简单的,设置一个灰色层，相对于窗口进行定位，然后弹框设置display为none来隐藏，block来显示。作为一个有追求的前端开发人员，显然这是不符合我的追求，所以在晚上空余的时间的时候，研究了下animate的动画，并且配合jquery来封装一
复制链接

扫一扫

专栏目录