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代码：

复制代码 代码如下:

  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制作的漂亮的弹出层提示特效的全部代码了，非常的漂亮吧，小伙伴们可以直接使用到自己的项目中去。