jquery erstellt eine schöne Popup-Ebene mit Eingabeaufforderungsnachrichten effects_jquery

Heute bringe ich Ihnen eine coole Popup-Ebenen-Eingabeaufforderungsnachricht basierend auf JQuery. Diese Beispielseite wird mit einer Go-Schaltfläche initialisiert. Wenn Sie auf die Schaltfläche „Los“ klicken, wird die Popup-Ebene der Eingabeaufforderung animiert. Das Rendering ist wie folgt:

Implementierungscode.

HTML-Code:

Code kopieren Der Code lautet wie folgt:

        LOS

          

              ✔
                                                                                                                                                                        Erfolg
                                                                                                                                                                                      Überprüfen Sie Ihre E-Mails auf eine Buchungsbestätigung. Wir sehen uns bald!
                                                                                           
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> Funktion 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:

Code kopieren

Der Code lautet wie folgt:

  Körper, HTML
        {
            Höhe: 100 %;
            Schriftgröße: 20px;
            Schriftfamilie: Source Sans Pro;
        }
        .b, .bb
        {
            Position: absolut;
            Breite: 100 %;
            Höhe: 100 %;
            Hintergrund: url("kje4L5j.jpg");
            Hintergrundanhang: behoben;
            Hintergrundgröße: cover;
            Hintergrundposition: Mitte;
        }
        .bb
        {
            Hintergrund: url("bDBs0et.jpg");
            Hintergrundanhang: behoben;
            Hintergrundgröße: cover;
            Hintergrundposition: Mitte;
            Anzeige: keine;
        }
        #go
        {
            Position: absolut;
            oben: 30px;
            übrig: 50 %;
            transform: Translate(-50%, 0%);
            Farbe: weiß;
            Grenze: 0;
            Hintergrund: #71c341;
            Breite: 100px;
            Höhe: 30px;
            Randradius: 6px;
            Schriftgröße: 1rem;
            Übergang: Hintergrund 0,2 Sekunden Leichtigkeit;
            Gliederung: keine;
        }
        #go:hover
        {
            Hintergrund: #8ecf68;
        }
        #go:aktiv
        {
            Hintergrund: #5a9f32;
        }
        .message
        {
            Position: absolut;
            oben: -200px;
            übrig: 50 %;
            transform: Translate(-50%, 0%);
            Breite: 300px;
            Hintergrund: weiß;
            Randradius: 8px;
            Polsterung: 30px;
            text-align: center;
            Schriftstärke: 300;
            Farbe: #2c2928;
            Deckkraft: 0;
            Übergang: oben 0,3 s kubischer Bézier (0,31, 0,25, 0,5, 1,5), Deckkraft 0,2 s einfacher Ein- und Ausstieg;
        }
        .message .check
        {
            Position: absolut;
            oben: 0;
            übrig: 50 %;
            transform: Translate(-50%, -50%) Scale(4);
            Breite: 120px;
            Höhe: 110px;
            Hintergrund: #71c341;
            Farbe: weiß;
            Schriftgröße: 3,8rem;
            padding-top: 10px;
            Randradius: 50 %;
            Deckkraft: 0;
            Übergang: Transformation 0,2 s 0,25 s Kubikbezier (0,31, 0,25, 0,5, 1,5), Deckkraft 0,1 s 0,25 s Easy-in-out;
        }
        .message .scaledown
        {
            transform: Translate(-50%, -50%) Scale(1);
            Deckkraft: 1;
        }
        .message p
        {
            Schriftgröße: 1.1rem;
            Rand: 25px 0px;
            Polsterung: 0;
        }
        .message p:nth-child(2)
        {
            Schriftgröße: 2.3rem;
            Rand: 40px 0px 0px 0px;
        }
        .message #ok
        {
            Position: relativ;
            Farbe: weiß;
            Grenze: 0;
            Hintergrund: #71c341;
            Breite: 100 %;
            Höhe: 50px;
            Randradius: 6px;
            Schriftgröße: 1.2rem;
            Übergang: Hintergrund 0,2 Sekunden Leichtigkeit;
            Gliederung: keine;
        }
        .message #ok:hover
        {
            Hintergrund: #8ecf68;
        }
        .message #ok:aktiv
        {
            Hintergrund: #5a9f32;
        }
        .comein
        {
            oben: 150px;
            Deckkraft: 1;
        }

以上就是基于jQuery制作的漂亮的弹出层提示特效的全部代码了,非常的漂亮吧,小伙伴们可以直接使用到自己的项目中去.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn