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 相关文章推荐
你需要知道的JavsScript可以做什么?
Jun 29 Javascript
javascript 按回车键相应按钮提交事件
Nov 02 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
Apr 03 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
js纯数字逐一停止显示效果的实现代码
Mar 16 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
Jul 01 Javascript
简述jQuery Easyui一些用法
Aug 01 jQuery
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 11 Javascript
微信小程序支付前端源码
Aug 29 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
Nov 05 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面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
php设计模式  Command(命令模式)
2011/06/17 PHP
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
javascript 动态创建表格
2015/01/08 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
2016/06/10 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
从源码角度来回答keep-alive组件的缓存原理
2021/01/18 Javascript
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
pandas通过索引进行排序的示例
2018/11/16 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
Python自动化导出zabbix数据并发邮件脚本
2019/08/16 Python
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
英国领先的高街书籍专家:Waterstones
2018/02/01 全球购物
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
Shell编程面试题
2016/05/29 面试题
大型主题婚礼活动策划方案
2014/09/15 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
Python道路车道线检测的实现
2021/06/27 Python
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技