Today, we bring a pop-up tip message that is based on jquery's hyper-dazzle. This instance page is initially a Go button. When you click the Go button, you are prompted to animate the strong layer. As follows:
Online preview Source Download
The implemented code.
HTML code:
<Divclass= ' B '> </Div> <Divclass= ' BB '> </Div> <ButtonID= ' Go '>GO</Button> <Divclass= ' message '> <Divclass= ' Check '>& #10004; </Div> <P>Success</P> <P>Check your email for a booking confirmation. We ' ll See you soon! </P> <ButtonID= ' OK '>OK</Button> </Div> <Scriptsrc= ' Jquery.js '></Script> <Script> $('#go'). Click (function() {Go ( -); }); $('#ok'). Click (function() {Go ( -); }); SetTimeout (function() {Go ( -); }, the); SetTimeout (function() {Go ( -); }, -); functionGo (NR) {$ ('. BB'). Fadetoggle ( $); $('. Message'). Toggleclass ('Comein'); $('. Check'). Toggleclass ('Scaledown'); $('#go'). Fadetoggle (NR); } //@ sourceurl=pen.js </Script>
CSS code:
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: -;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; }
via:http://www.w2bc.com/article/13018
An awesome pop-up tip message based on jquery