一款基于jquery超炫的弹出层提示消息
2014-12-19 00:00
645 查看
今天给大家带来一款基于jquery超炫的弹出层提示消息。这款实例页面初始时,一个go按钮。当单击go按钮时,提示强出层以动画形式出现。效果图如下:
在线预览 源码下载
实现的代码。
html代码:
css代码:
via:/article/1211495.html
在线预览 源码下载
实现的代码。
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; }
via:/article/1211495.html
相关文章推荐
- 一款基于jquery超炫的弹出层提示消息
- 基于jQuery的弹出消息插件 DivAlert之旅(一)
- 基于JQuery 的消息提示框效果代码
- 一款基于jquery超炫的图片切换特效
- 一款基于jQuery的图片场景标注提示弹窗特效
- 基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
- jGrowl 基于jQuery的消息弹出框插件
- 一款基于jquery超炫的图片切换特效
- 一款基于jquery打造的鼠标响应式顶部弹出窗口特效
- 一款基于css3和jquery实现的动画显示弹出层按钮教程
- capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
- 分享一个基于jQuery,backbone.js和underscore.js的消息提示框架 - Backbone.Notifier
- 基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
- 一款基于css3和jquery实现的动画弹出层
- 基于jQuery的消息提示插件 DivAlert之旅(二)
- 基于JQuery 的消息提示框
- 基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
- 分享一个基于jQuery,backbone.js和underscore.js的消息提示框架 -...
- 一款基于jQuery的图片场景标注提示弹窗特效
- 一款基于css3和jquery实现的动画弹出层