NiceSnippets.com
JQuery plugin for Avgrund concept popin
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>'
});
});
