This is example of avgrund modal. when you click on button at that time you screen go back. this is work like popin. Avgrund Modal is a jQuery Modal Plugin for adding beautiful Modal Boxes & Popups to your website. modal concept which aims to give a sense of depth between the page and modal layers. Click the preview button below to give it a try.


<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="Dmitri Voronianski"> <title>jQuery plugin for Avgrund concept popin</title> <link rel="stylesheet" href="demo.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.avgrund/1.3.1/jquery.avgrund.min.js"></script> </head> <body> <div class="container"> <div class="buttons"> <button id="show" class="button">Show it</button> </div> </div> </body> </html>
html, body { height: 100%; overflow: auto; } .avgrund-popin { position: absolute; background: #fff; padding: 10px; overflow: hidden; visibility: hidden; opacity: 0; filter: alpha(opacity=0); top: 50%; left: 50%; z-index: 1000; box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .5); -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } .avgrund-overlay { background: #000; width: 100%; position: relative; top: -1500px; left: 0; z-index: 101; visibility: hidden; opacity: 0; filter: alpha(opacity=0); } body.avgrund-ready, .avgrund-ready .avgrund-popin, .avgrund-ready .avgrund-overlay { -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transition: 0.3s all ease-out; -moz-transition: 0.3s all ease-out; -ms-transition: 0.3s all ease-out; -o-transition: 0.3s all ease-out; transition: 0.3s all ease-out; } body.avgrund-active { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); overflow: hidden; } .avgrund-active .avgrund-popin { visibility: visible; opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .avgrund-active .avgrund-overlay { visibility: visible; opacity: .5; filter: alpha(opacity=50); height: 20000px; } .avgrund-popin.stack { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } .avgrund-active .avgrund-popin.stack { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .avgrund-active .avgrund-blur { -webkit-filter: blur(1px); -moz-filter: blur(1px); -ms-filter: blur(1px); -o-filter: blur(1px); filter: blur(1px); } /* Optional close button styles */ .avgrund-close { display: block; color: #555; font-size: 13px; text-decoration: none; text-transform: uppercase; position: absolute; top: 6px; right: 10px; } body { text-align: center; padding-top: 30px; background-color: #86AFBF; } .container { margin: 0 auto; } .button { background: #ED5E2F; background: #000; color: #FFF; padding: 10px 20px; text-transform: uppercase; border:0px; box-shadow: 0px 0px 2px 0px #fff; } /* Custom styles for popin & close button */ .custom { color: #555; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .custom p { padding: 10px 20px; margin: 30px 0 0; font-size: 14px; font-weight: 300; text-align: justify; } .github, .twitter, .dribble { float: left; text-align: center; font-size: 12px; color: white; padding: 8px 18px; margin: 18px 0 0 20px; text-decoration: none; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; transition: background 0.3s ease; } .github { background: rgba(83, 83, 83, 0.8); } .github:hover { background: rgba(83, 83, 83, 1); } .twitter { background: rgba(71, 186, 255, 0.8); } .twitter:hover { background: rgba(71, 186, 255, 1); } .dribble { background: rgba(241, 118, 122, 0.8); } .dribble:hover { background: rgba(241, 118, 122, 1); }
$(function() { $('#show').avgrund({ height: 200, holderClass: 'custom', showClose: true, showCloseText: 'close', onBlurContainer: '.container', template: '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>' + '<div>' + '<a href="#" target="_blank" class="github">Github</a>' + '<a href="#" target="_blank" class="twitter">Twitter</a>' + '<a href="#" target="_blank" class="dribble">Dribbble</a>' + '</div>' }); });




Random Post




Related Post

Register and login form page design with animation using bootstrap

Register and login form page design with animation using boo...

you can get free ragister and login form page design free. register and login form design in tab with every refresh different background animation. you can g...

Read More
How to create custom loading image or div using css ?

How to create custom loading image or div using css ?

Simple loading div and you can easaly implement in your project. in this loading you can also change loading image color. this image not load on server. you...

Read More
Custom good looking checkbox and radio button design usign bootstrap

Custom good looking checkbox and radio button design usign b...

checkbox and radio button with onclick custom effect. and also you can change color and effect. and you can easaly implement in your project. you can get cod...

Read More