jquery製作漂亮的彈出層提示訊息特效_jquery

今天帶給大家一個基於jquery超炫的彈出層提示訊息。這款實例頁面初始時，一個go按鈕。當點選go按鈕時，提示強出層以動畫形式出現。效果圖如下：

實作的程式碼。

html代碼：

複製程式碼 程式碼如下:

 

   

   

   

   
        GO
   
   

       

            ✔
       

       

            Success
       

       

            Check your email for a booking confirmation. We'll see you soon!
       

       
            OK
       
   

   
    <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製作的漂亮的彈出層提示效果的全部程式碼了，非常漂亮吧，小夥伴們可以直接使用到自己的專案中去。