An awesome pop-up tip message based on jquery

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