Posted in Javascript onDecember 23, 2014
今天给大家带来一款基于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制作漂亮的弹出层提示消息特效
- Author -
hebedich声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@