Live Demo - JQuery plugin for Avgrund concept popin

See Free Live Demo example of 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....

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