45IT.COM- 电脑学习从此开始!
DIY硬件教程攒机经验装机配置
设计Photoshop网页设计特效
系统注册表DOS系统命令其它
存储主板显卡外设键鼠内存
维修显卡CPU内存打印机
WinXPVistaWin7unix/linux
CPU光驱电源/散热显示器其它
修技主板硬盘键鼠显示器光驱
办公ExcelWordPowerPointWPS
编程数据库CSS脚本PHP
网络局域网QQ服务器
软件网络系统图像安全
页面导航: 首页 > 设计学院 > 网络编程 > javascript >

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

电脑软硬件应用网 45IT.COM 时间:2014-12-24 13:43 作者:佚名
今天给大家带来一款基于jquery超炫的弹出层提示消息。这款实例页面初始时,一个go按钮。当单击go按钮时,提示强出层以动画形式出现。效果图如下: 实现的代码。 html代码: 代码如下: div class=b /div div class=b

今天给大家带来一款基于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制作的漂亮的弹出层提示特效的全部代码了,非常的漂亮吧,小伙伴们可以直接使用到自己的项目中去。

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片
推荐知识