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

Related labels：

jquery Pop-up layer

source：php.cn

Previous article：Collection of commonly used jQuery front-end skills_jquery Next article：Example of usage of width() method in jQuery_jquery

Statement of this Website

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

Latest Articles by Author

• What is a NullPointerException, and how do I fix it?
  2024-10-22 09:46:29
• From Novice to Coder: Your Journey Begins with C Fundamentals
  2024-10-13 13:53:41
• Unlocking Web Development with PHP: A Beginner's Guide
  2024-10-12 12:15:51
• Demystifying C: A Clear and Simple Path for New Programmers
  2024-10-11 22:47:31
• Unlock Your Coding Potential: C Programming for Absolute Beginners
  2024-10-11 19:36:51
• Unleash Your Inner Programmer: C for Absolute Beginners
  2024-10-11 15:50:41
• Automate Your Life with C: Scripts and Tools for Beginners
  2024-10-11 15:07:41
• PHP Made Easy: Your First Steps in Web Development
  2024-10-11 14:21:21
• Build Anything with Python: A Beginner's Guide to Unleashing Your Creativity
  2024-10-11 12:59:11
• The Key to Coding: Unlocking the Power of Python for Beginners
  2024-10-11 12:17:31

Latest Issues

Submit form without button using Javascript/Jquery I'm trying to submit a form without a button by calling a JavaScript function and executin...

From 2024-04-06 14:54:03

0

2

421

How to retrieve values ​​of unselected rows in HTML data table using jquery I'm trying to get the value of all rows where the button was not clicked. For example, whe...

From 2024-04-05 09:26:49

0

1

1418

Need a jquery script to move selected options from a select box based on the end user's current selection I have an HTML page where the end user can rank our items via a select box element. See th...

From 2024-04-04 18:40:04

0

1

3528

I've created an element in pure CSS via bookmarks. It is created but not visible My code is as follows: g=document.createElement('div');g.setAttribute("id","...

From 2024-04-04 17:27:27

0

1

417

Unable to send form data on Safari/Firefox iOS This works on all platforms except Safari/Firefox on iOS: jQuery("#gform_1").one...

From 2024-04-04 12:53:48

0

1

303

Related Topics

More>

• What are the jquery plug-ins?
• How to operate json with jquery
• How to delete elements in jquery
• Use of jQuery hover() method
• jquery implements paging method
• What is a hidden element in jquery
• What is highlighting in jquery
• Bulk trading platform