jquery制作漂亮的弹出层提示消息特效
今天给大家带来一款基于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: 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制作的漂亮的弹出层提示特效的全部代码了，非常的漂亮吧，小伙伴们可以直接使用到自己的项目中去。
-
本文向大家介绍超漂亮的jQuery图片轮播特效，包括了超漂亮的jQuery图片轮播特效的使用技巧和注意事项，需要的朋友参考一下 超漂亮的jQuery图片轮播特效，使用了插件jCarousel，很棒的jQuery插件，支持带缩略图左右切换，支持Ajax加载数据，响应式布局，支持移动端触屏，强大的API参数配置功能以及函数回调功能，支持自定义动画速度和动画模式，支持轮播方向定义，还是很不错的，推荐学习
-
本文向大家介绍JavaScript制作弹出层效果，包括了JavaScript制作弹出层效果的使用技巧和注意事项，需要的朋友参考一下 先给大家展示下效果图，效果图如下所示： 1.引用相关easyui.min.js，easyui-lang-zh_CN.js 等js 文件； 2.前台代码 3.js 代码 4.选择信息时，可双击 也可单击点确认。 以上所述是小编给大家介绍的JavaScript制作弹出层效
-
本文向大家介绍jQuery实现时尚漂亮的弹出式对话框实例，包括了jQuery实现时尚漂亮的弹出式对话框实例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现时尚漂亮的弹出式对话框。分享给大家供大家参考。具体如下： 这是一款十分简洁漂亮的HTML5弹出对话框效果，基于jQuery来实现，引入了jquery1.6.2库。 本效果描述：用鼠标点击一下右上角的小图标，会弹出一个层对话
-
本文向大家介绍jquery实现可拖拽弹出层特效，包括了jquery实现可拖拽弹出层特效的使用技巧和注意事项，需要的朋友参考一下 功能很简单，却非常的实用，代码更加的简洁，这里就不多废话了 奉上源码：
-
本文向大家介绍JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】，包括了JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JavaScript实现的弹出遮罩层特效。分享给大家供大家参考，具体如下： 这篇给大家分享一个简单的遮罩层特效，先上效果图。 代码： 页面中有一个表格，一个隐藏的弹出层，当点击查看按钮，
-
问题内容： 我正在尝试创建一个“气泡”，该气泡可以在事件触发时弹出，并且只要鼠标悬停在引发事件的项目上方，或者如果鼠标移入气泡中，它就会保持打开状态。我的泡沫将需要具有各种HTML和样式，包括超链接，图像等。 我基本上通过编写约200行丑陋的JavaScript来实现了这一目标，但是我真的很想找到一个jQuery插件或其他一些方法来解决这一问题。 问题答案： Qtip是我见过的最好的Qtip。它是