今天给大家带来一款基于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;