jquery creates beautiful pop-up layer prompt message effects_jquery

Today I bring you a cool pop-up layer prompt message based on jquery. This example page initializes with a go button. When the go button is clicked, the prompt popup layer animates. The rendering is as follows:

Implementation code.

html code:

Copy code The code is as follows:

        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 code:

Copy code

The code is as follows:

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn