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>' }); });

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post