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

在线预览   源码下载

实现的代码。

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:;
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:;
color: #2c2928;
opacity:;
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:;
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:;
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:;
}
.message p
{
font-size: 1.1rem;
margin: 25px 0px;
padding:;
}
.message p:nth-child(2)
{
font-size: 2.3rem;
margin: 40px 0px 0px 0px;
}
.message #ok
{
position: relative;
color: white;
border:;
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:;
}

via:http://www.w2bc.com/Article/13018

一款基于jquery超炫的弹出层提示消息的更多相关文章

  1. 一款基于jquery超炫的图片切换特效

    今天为给大家介绍一款基于jquery超炫的图片切换特效.由百叶窗飞入显示图片.图片消息的时候也是百叶窗渐行渐远.用于图片展示,效果还是非常好,我们一起看下效果图: 在线预览   源码下载 来看下实现的 ...

  2. 一款基于css3和jquery实现的动画弹出层

    今天给大家分享一款基于css3和jquery实现的动画弹出层.这款弹出层初页面面一个显示弹出层按钮.单击该按钮时,弹出层以非常炫的动画形式出现.弹出层有关闭按钮,单击半闭按钮,弹出层关闭.效果图如下: ...

  3. 一款基jquery超炫的动画导航菜单

    今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 在线预览   ...

  4. 基于jQuery鼠标点击弹出登陆框效果

    基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <input type=" ...

  5. 基于Jquery 简单实用的弹出提示框

    基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...

  6. jQuery WIN 7透明弹出层效果

    jQuery WIN 7透明弹出层效果,点击可以弹出一个透明层的jquery特效,插件可以调弹出框的宽度和高度,很不错的一个弹出层插件. 适用浏览器:IE8.360.FireFox.Chrome.Sa ...

  7. jQuery、layer实现弹出层的打开、关闭功能实例详解

    本文主要介绍了jQuery.layer实现弹出层的打开.关闭功能,需要的朋友可以参考下,希望能帮助到大家. 打开弹出层: 在list页面带入layer.js 在list页面点击时,弹出form弹出层, ...

  8. [转]jquery Fancybox丰富的弹出层效果

    本文转自:http://www.helloweba.com/view-blog-65.html Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facyb ...

  9. 基于Jquery的原生态dialog弹出窗口-zapWindow

    看到boss系统搓B的填出窗口,不忍直视,坚决的换掉! 采用zapwindow(来源不清楚了,总之是前人留下的),做了修改,当前支持三类弹出类型: 1. 指定url 2. 自定义html 3. 指定D ...

随机推荐

  1. linux 处理键盘 鼠标事件

    Linux下鼠标和键盘的模拟控制,也就是为手势和语音控制鼠标和键盘部分服务的. 有关于本系统构建的文章结构都会由三个部分来组织,一是该功能模块的介绍和在Linux下简单应用程序的实现:二是将该功能模块 ...

  2. Microsoft Visual C++ 14.0 is required问题的解决或warning: Debugger speedups using cython not found

    今天在下载了 python3.64版本的安装后运行爬虫程序报错: warning: Debugger speedups using cython not found. Run '"C:\Py ...

  3. cocos2d-x游戏开发 跑酷(八) 对象管理 碰撞检測

    对象管理类的原理是这种: ObjectManager类是一个单例类,全局仅仅有一个对象实例存在.初始化的时候创建两个数组CCArray来保存金币和岩石.为什么要保存,由于在地图重载的时候.要销毁看不见 ...

  4. FormBorderStyle为None的时候如何拖动窗体

    //为DllImport导出命名空间, using System.Runtime.InteropServices; public partial class Form1 : System.Window ...

  5. 转: SVN使用教程总结(图文丰富,相当详细)

    转自:http://www.cnblogs.com/armyfai/p/3985660.html SVN使用教程总结   SVN简介: 为什么要使用SVN? 程序员在编写程序的过程中,每个程序员都会生 ...

  6. 解密SVM系列(四):SVM非线性分类原理实验

    前面几节我们讨论了SVM原理.求解线性分类下SVM的SMO方法.本节将分析SVM处理非线性分类的相关问题. 一般的非线性分类例如以下左所看到的(后面我们将实战以下这种情况): 能够看到在原始空间中你想 ...

  7. 定义查询构建器IFeatureLayerDefinition

    在宗地出图,需要实现,只显示某一户人的地块.在ArcMap里,有个定义查询,可只显示过滤后的要素. 在代码中,也比较好实现,使用IFeatureLayerDefinition接口即可. IFeatur ...

  8. STL - 常用关联容器代码 - set & multiset

    代码如下: /* 5. set & multiset */ set<string> cities{ "Braunschweig", "Hanover& ...

  9. mvn 编译错误java.lang.NoSuchMethodError: org.objectweb.asm.ClassWriter. <init>(Z)V

    Spring+struts2 +hibernate3集成,在后台测试时报的错,报错的这句话: Exception in thread "main" java.lang.NoSuch ...

  10. 使用 RDVTabBarController 制作底部凸起的 TabBar 笔记

    欢迎訪问我的个人博客http://mmoaay.photo/ 本文主要针对底部凸起的 TabBar 这样的特殊需求,不感兴趣的能够直接绕过- 近期做的一个项目须要底部凸起的 TabBar,效果例如以下 ...