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

原文: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,这样就实现一开始的效果了。

时间: 2024-07-30 03:06:11

JQuery+CSS3实现封装弹出登录框效果的相关文章

jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)_jquery

弹出层用来向用户展示详细的信息,交互性非常强.弹出层有对话框.模态窗口等形式,这里我都把他们叫做弹出层,我的同事们也是这么叫的.一般我们喜欢使用比较成熟的弹出层插件如fancybox等,但在本文,我将先抛弃插件,给大家介绍如何使用jQuery+CSS3+Html5实现弹出层. 效果展示        源码下载 我们完全使用HTML5+CSS3+jQuery来实现一个基本的弹出层效果,因此我们可以在示例中任意修改弹出层外观样式.甚至js方法调用.我们最终做出来的弹出层效果应该是响应式的,也就是说可

Jquery中LigerUi的弹出编辑框(实现方法)

本篇文章是对Jquery中LigerUi的弹出编辑框的实现方法进行了分析介绍,需要的朋友可以参考下   一.载入 复制代码 代码如下:     <link href="../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />     <script src="../lib/jquery/jquery-1.5.2.

java-spring-security中ajax请求是,弹出登录框的办法

问题描述 spring-security中ajax请求是,弹出登录框的办法 现在凡是session失效后都会跳转到登录页面.求一个,在session失效后,ajax访问能直接弹出自定义登录框不用跳转登录页面的思路.如何修改其中的filter?修改什么filter? 解决方案 目测应该是ajax请求和正常请求都走了登录filter的原因,然后登录filter判断未登录时都跳了登录页面,所以要解决这个问题,要么你在登录filter里面做判断区分,如果是ajax请求不要跳登录页面,给个特定的返回,然后

基于Jquery+div+css实现弹出登录窗口(代码超简单)_jquery

具体代码详情如下所示: 基本思路先隐藏(dispaly:none)再显示,半透明蒙版层通过 z-index:9998; z-index:9999; 值越大越在前面 index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

jQuery显示隐藏层插件实例登录框的演示

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"     "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

单击输入框弹出选择框效果js脚本

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>实用的单击输入框弹出选择框效果 http://w

jquery+css3实现会动的小圆圈效果_jquery

本文实例讲述了jquery+css3实现会动的小圆圈效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>那些变换颜色的小豆豆</title> <script type="text/javascript&quo

jquery+CSS3实现淘宝移动网页菜单效果_jquery

本文实例讲述了jquery+CSS3实现淘宝移动网页菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jquery+CSS3实现的淘宝移动网页菜单,其实这个菜单动画并不复杂,只有缩放和位移.难点是用了扇形结构,而且还要实现扇形的链接区域,这个就费脑筋了,最后采用了传统的图片map来做热区,效果还不错.相信肯定有更好的解决方法. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-css3-taobao-phone-menu-c

JS实现单击输入框弹出选择框效果完整实例_javascript技巧

本文实例讲述了JS实现单击输入框弹出选择框效果的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999