今天帶給大家一個基於jquery超炫的彈出層提示訊息。這款實例頁面初始時，一個go按鈕。當點選go按鈕時，提示強出層以動畫形式出現。效果圖如下：
實作的程式碼。
html代碼：
✔
Success
Check your email for a booking confirmation. We'll see you soon!
<script><br />
$('#go').click(function () {<br />
go(50);<br />
});<br />
$('#ok').click(function () {<br />
go(500);<br />
});<br />
setTimeout(function () {<br />
go(50);<br />
}, 700);<br />
setTimeout(function () {<br />
go(500);<br />
}, 2000);<br />
function go(nr) {<br />
$('.bb').fadeToggle(200);<br />
$('.message').toggleClass('comein');<br />
$('.check').toggleClass('scaledown');<br />
$('#go').fadeToggle(nr);<br />
}<br />
//@ sourceURL=pen.js<br />
</script>
css代碼：
正文，html
{
高度：100%；
字體大小：20px;
字型系列：Source Sans Pro；
}
.b、.bb
{
位置：絕對；
寬度：100%；
高度：100%；
背景: url("kje4L5j.jpg");
背景配件：已修正；
背景大小：封面；
背景位置：中心；
}
.bb
{
背景: url("bDBs0et.jpg");
背景配件：已修復；
背景大小：封面；
背景位置：中心；
顯示：無；
}
#去
{
位置：絕對；
上方：30px；
左：50%；
轉換：翻譯(-50%, 0%);
顏色：白色；
邊框：0；
背景：#71c341；
寬度：100px；
高度：30px；
邊框半徑：6px；
字體大小：1rem；
過渡：背景 0.2 秒緩動；
大綱：無；
}
#go：懸停
{
背景：#8ecf68;
}
#go:活躍
{
背景：#5a9f32；
}
.訊息
{
位置：絕對；
上方：-200px；
左：50%；
轉換：翻譯(-50%, 0%);
寬度：300px；
背景：白色；
邊框半徑：8px；
內邊距：30px；
文字對齊：置中；
字體粗細：300；
顏色：#2c2928；
不透明度：0；
過渡：上 0.3s 三次貝塞爾曲線(0.31, 0.25, 0.5, 1.5)，不透明度 0.2s 緩入緩出；
}
.訊息.檢查
{
位置：絕對；
上方：0；
左：50%；
轉換：翻譯（-50%，-50%）縮放（4）；
寬度：120px；
高度：110px；
背景：#71c341；
顏色：白色；
字體大小：3.8rem；
上填入：10px；
邊框半徑：50%；
不透明度：0；
過渡：變換 0.2s 0.25s 三次貝塞爾曲線(0.31, 0.25, 0.5, 1.5)，不透明度 0.1s 0.25s 緩入緩出>
}
.message .scaledown
{
轉換：翻譯（-50%，-50%）縮放（1）；
不透明度：1；
}
.訊息p
{
字體大小：1.1rem；
邊距：25px 0px;
填入：0；
}
.訊息 p:nth-child(2)
{
字體大小：2.3rem；
邊距：40px 0px 0px 0px;
}
.訊息#ok
{
位置：相對；
顏色：白色；
邊框：0；
背景：#71c341；
寬度：100%；
高度：50px；
邊框半徑：6px；
字體大小：1.2rem；
過渡：背景 0.2 秒緩動；
大綱：無；
}
.message #ok:停留
{
背景：#8ecf68;
}
.message #ok:active
{
背景：#5a9f32；
}
.進來
{
上方：150px；
不透明度：1；
}
以上就是基於jQuery製作的漂亮的彈出層提示效果的全部程式碼了，非常漂亮吧，小夥伴們可以直接使用到自己的專案中去。
