jquery制作漂亮的弹出层提示消息特效


Posted in Javascript onDecember 23, 2014

今天给大家带来一款基于jquery超炫的弹出层提示消息。这款实例页面初始时,一个go按钮。当单击go按钮时,提示强出层以动画形式出现。效果图如下:

jquery制作漂亮的弹出层提示消息特效

实现的代码。

html代码:

  <div class='b'>

    </div>

    <div class='bb'>

    </div>

    <button id='go'>

        GO

    </button>

    <div class='message'>

        <div class='check'>

            ✔

        </div>

        <p>

            Success

        </p>

        <p>

            Check your email for a booking confirmation. We'll see you soon!

        </p>

        <button id='ok'>

            OK

        </button>

    </div>

    <script src='jquery.js'></script>

    <script>

        $('#go').click(function () {

            go(50);

        });

        $('#ok').click(function () {

            go(500);

        });

        setTimeout(function () {

            go(50);

        }, 700);

        setTimeout(function () {

            go(500);

        }, 2000);

        function go(nr) {

            $('.bb').fadeToggle(200);

            $('.message').toggleClass('comein');

            $('.check').toggleClass('scaledown');

            $('#go').fadeToggle(nr);

        }

        //@ sourceURL=pen.js

    </script>

css代码:

  body, html

        {

            height: 100%;

            font-size: 20px;

            font-family: Source Sans Pro;

        }

        .b, .bb

        {

            position: absolute;

            width: 100%;

            height: 100%;

            background: url("kje4L5j.jpg");

            background-attachment: fixed;

            background-size: cover;

            background-position: center;

        }

        .bb

        {

            background: url("bDBs0et.jpg");

            background-attachment: fixed;

            background-size: cover;

            background-position: center;

            display: none;

        }

        #go

        {

            position: absolute;

            top: 30px;

            left: 50%;

            transform: translate(-50%, 0%);

            color: white;

            border: 0;

            background: #71c341;

            width: 100px;

            height: 30px;

            border-radius: 6px;

            font-size: 1rem;

            transition: background 0.2s ease;

            outline: none;

        }

        #go:hover

        {

            background: #8ecf68;

        }

        #go:active

        {

            background: #5a9f32;

        }

        .message

        {

            position: absolute;

            top: -200px;

            left: 50%;

            transform: translate(-50%, 0%);

            width: 300px;

            background: white;

            border-radius: 8px;

            padding: 30px;

            text-align: center;

            font-weight: 300;

            color: #2c2928;

            opacity: 0;

            transition: top 0.3s cubic-bezier(0.31, 0.25, 0.5, 1.5), opacity 0.2s ease-in-out;

        }

        .message .check

        {

            position: absolute;

            top: 0;

            left: 50%;

            transform: translate(-50%, -50%) scale(4);

            width: 120px;

            height: 110px;

            background: #71c341;

            color: white;

            font-size: 3.8rem;

            padding-top: 10px;

            border-radius: 50%;

            opacity: 0;

            transition: transform 0.2s 0.25s cubic-bezier(0.31, 0.25, 0.5, 1.5), opacity 0.1s 0.25s ease-in-out;

        }

        .message .scaledown

        {

            transform: translate(-50%, -50%) scale(1);

            opacity: 1;

        }

        .message p

        {

            font-size: 1.1rem;

            margin: 25px 0px;

            padding: 0;

        }

        .message p:nth-child(2)

        {

            font-size: 2.3rem;

            margin: 40px 0px 0px 0px;

        }

        .message #ok

        {

            position: relative;

            color: white;

            border: 0;

            background: #71c341;

            width: 100%;

            height: 50px;

            border-radius: 6px;

            font-size: 1.2rem;

            transition: background 0.2s ease;

            outline: none;

        }

        .message #ok:hover

        {

            background: #8ecf68;

        }

        .message #ok:active

        {

            background: #5a9f32;

        }

        .comein

        {

            top: 150px;

            opacity: 1;

        }

以上就是基于jQuery制作的漂亮的弹出层提示特效的全部代码了,非常的漂亮吧,小伙伴们可以直接使用到自己的项目中去。

Javascript 相关文章推荐
js或css实现滚动广告的几种方案
Jan 28 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
May 25 Javascript
关于JQuery($.load)事件的用法和分析
Apr 09 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
Angular+Node生成随机数的方法
Jun 16 Javascript
微信小程序云开发之使用云存储
May 17 Javascript
字节飞书面试promise.all实现示例
Jun 16 Javascript
使用jQuery仿苹果官网焦点图特效
Dec 23 #Javascript
jQuery分组选择器用法实例
Dec 23 #Javascript
常用的JS验证和函数汇总
Dec 23 #Javascript
jQuery后代选择器用法实例
Dec 23 #Javascript
浅析Javascript中“==”与“===”的区别
Dec 23 #Javascript
javascript实现微信分享
Dec 23 #Javascript
JSON取值前判断
Dec 23 #Javascript
You might like
PHP 命名空间实例说明
2011/01/27 PHP
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
PHP中根据IP地址判断城市实现城市切换或跳转代码
2012/09/04 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
php微信开发之谷歌测距
2018/06/14 PHP
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
js动态创建、删除表格示例代码
2013/08/07 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
2015/12/08 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
js实现简易聊天对话框
2017/08/17 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
微信小程序实现上传多张图片、删除图片
2020/07/29 Javascript
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
详解Python3中ceil()函数用法
2019/02/19 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
广州一家公司的.NET面试题
2016/06/11 面试题
团员学习总结的自我评价范文
2013/10/14 职场文书
个人找工作求职简历的自我评价
2013/10/20 职场文书
护士专业推荐信
2013/11/02 职场文书
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
关于打架的检讨书
2014/01/17 职场文书
高三学生评语大全
2014/04/25 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
新学期开学寄语2016
2015/12/04 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python