开发者社区> 杰克.陈> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 原文:JQuery+CSS3实现封装弹出登录框效果 上次发了一篇使用Javascript来实现弹出层的效果,这次刚好用了JQuery来实现,所以顺便记录一下: 因为这次使用了Bootstrap来做一个项目,但是由于不使用Bootstrap自带的JS插件,所以这个弹出登录框就自己实现封装来调用,做出来的效果其实和Bootstrap自带的效果差不多。
+关注继续查看
原文:JQuery+CSS3实现封装弹出登录框效果

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

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

360截图20150429131756722

其实很简单,首先是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,这样就实现一开始的效果了。微笑

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jQuery封装Ajax,SpringMVC使用Ajax的配置
jQuery封装Ajax,SpringMVC使用Ajax的配置
0 0
【前端】使用jQuery封装一套UI组件 - 级联选择器组件
本篇文章来讲解下级联选择器组件 级联选择器,在实际项目中也是比较常用的组件,比如:省市区三级关联,上下级联动等 最后面会附上全部代码
0 0
【前端】使用jQuery封装一套UI组件 - 是和否滑动切换组件
本篇文章来讲解下是和否的滑动切换组件 切换滑动组件,使用的场景实际上就是一个开和关的场景,一般有是和否,开和关,禁用和启用等等,只需要设置0和1即可
0 0
【前端】使用jQuery封装一套UI组件 - 可编辑下拉框组件
下拉框也是比较常用的组件,对应原生的下拉标签就是select 本篇文章就来讲讲可编辑下拉框组件的封装过程
0 0
【前端】使用jQuery封装一套UI组件 - 移动端时间选择组件
【首先要声明一点,技术不分好坏,能用好就行,不用鄙视老技术】 今天要给大家展示的是移动端时间选择组件 最开始,看到比较新颖的移动端时间选择组件是在某款手机上,分年月日下拉选择,UI界面也挺好看的 除了讲解实现的步骤以及关键点,文章最后面会有完整的代码
0 0
【前端】使用jQuery封装一套UI组件 - 单选框
目前前端技术发展非常快,各大厂都开源和分享了自家的前端框架,非常多成熟的UI组件供大家选择,很实用也很方便,给开发上节省了不少时间成本,当然少不了学习成本,不过也不会占用太多时间,只要有前端基础的话,原理基本都是通用的,只是写法不一样。 因此,除了学习现有的优秀前端之外,最好能自己根据原理封装一套自己的UI组件,目的是为了更好的理解前端知识点以及锻炼编程逻辑
0 0
详解原生Ajax的实现,并模仿JQuery进行封装(上)
对于Ajax,肯定很多小伙伴都听过甚至用过了,那么没听过的也不用着急,本文会对Ajax进行讲解,其次,一定还有一些人只用过JQuery封装好了的Ajax却对原生的Ajax并不了解,那么也不用着急,本文从最基本的Ajax开始讲起,然后最后会尽可能得模仿JQuery对其进行封装,让我刚才提到的两类人能对Ajax有进一步的了解。
0 0
jQuery(四)动画、类数组对象操作、添加自定义函数、封装自定义插件
jQuery(四)动画、类数组对象操作、添加自定义函数、封装自定义插件
0 0
+关注
杰克.陈
一个安静的程序猿~
文章
问答
文章排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载