今天给大家带来一款基于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,弹出层
稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！
昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？