JQuery+CSS3实现封装弹出登录框效果

上次发了一篇使用Javascript来实现弹出层的效果，这次刚好用了JQuery来实现，所以顺便记录一下：

因为这次使用了Bootstrap来做一个项目，但是由于不使用Bootstrap自带的JS插件，所以这个弹出登录框就自己实现封装来调用，做出来的效果其实和Bootstrap自带的效果差不多。OK，看一下效果图：

其实很简单，首先是html结构：

<div id="mask"></div>     <!-- 半透明遮罩层 -->
<div id="login">
       <h3>弹出层标题</h3>
       <div class="loginCon">
                 表单内容
        </div>
</div>

然后先设置一下css样式：

#mask{ 
    background-color:#000;
    opacity:0.5;
    filter: alpha(opacity=50); 
    position:absolute; 
    left:0;
    top:0;
    z-index:9998;
    display:none;
}
#login{ 
    position:fixed;
    width:400px;
    z-index:9999;
    background-color:#fff;
    border-radius:15px;
    box-shadow:0 3px 4px #eee;
    display:none;
}

应该很容易理解吧，一般先将样式设置好，然后再添加display：none;将其默认隐藏，然后，我们通过JQuery来获取并计算遮罩层的宽高和登录框的水平垂直居中位置的top/left值。

这里我将实现登录框效果封装成一个函数：

//弹出层
function openDialog(id,className)
{
    var mask = $('#mask');
    var login = $('#'+id);
    var sWidth = $(document.body).outerWidth(true);   //获取窗口文档body的总宽度，包括border和padding
    var sHeight = $(document.body).outerHeight(true);   //获取窗口文档body的总高度，包括border和padding
    var cHeight = $(window).height();                 //获取浏览器窗口的可视区高度
    var lWidth = login.width();                     //登录框的宽度
    var lHeight = login.height();                  //登录框的高度
    var left = (sWidth - lWidth) / 2;              //计算登录框的left值：等于总宽度减去登录框宽度再除以2
    var top = (cHeight - lHeight) / 2;             //计算登录框的top值：等于可视区高度减去登录框高度再除以2
    mask.css({
        'display': 'block',
        'width': sWidth + 'px',
        'height': sHeight + 'px'
    });
    login.css({
        'display': 'block',
        'top': top + 'px',
        'left': left + 'px'
    }).addClass('animated zoomInDown');          //添加动画类

    $('.' + className).click(function () {  
        close();
    });
    mask.click(function () {
        close();
    });

    //隐藏遮罩层和登录框
    function close() {
        mask.css('display', 'none');
        login.css('display', 'none');
    }
    return false;
}

其中，函数参数中 id 指的是登录框的id值，而 className 是关闭按钮的类名，为什么不是id值而是类名呢，我的考虑是一个登录框可能不止一个关闭取消按钮，所以用类名更直接。

接下来就是通过事件调用此函数：

//登录注册
$('#btnLogin').click(function () {
    openDialog('login', 'close');
    return false;
});

点击你设置的登录注册按钮来实现弹出层效果，传入你的登录框ID值 和 取消关闭按钮的类名即可，至于怎么命名就看你用于什么了，这里实现的是登录框。

这里当点击登录按钮的时候，我添加了动画效果，让登录框出来的时候是弹出来的。我使用的是animate.css里的一个效果 zoomInDown，但由于我只用这一个效果，所以不需要引入整个animate.css文件，直接拿里面zoomInDown对应的样式规则就行，如果zoomInDown效果的代码为：

@-webkit-keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
            transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
            transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
            transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
            transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInDown {
  -webkit-animation: zoomInDown 1s both;
          animation: zoomInDown 1s both;
}

这些效果自己写确实比较耗时，所以直接拿来用确实很方便。自己想要什么效果可以去animate.css动画库那里选一个喜欢的，然后拿对应的代码即可。

OK，这样就实现一开始的效果了。