Вот вам примерчик
Кнопка
<a class="button" data-type="window-container">Регистрация</a>
js код
<script type="text/javascript">
$(document).ready(function() {
$('.button').click(function() {
type = $(this).attr('data-type');
$('.overlay-container').fadeIn(function() {
window.setTimeout(function(){
$('.window-container.'+type).addClass('window-container-visible');
}, 100);
});
});
$('.box-close').click(function() {
$('.overlay-container').fadeOut().end().find('.window-container').removeClass('window-container-visible');
});
});
</script>
html код
<div class="overlay-container">
<div class="window-container">
<div class="box-close">Закрыть</div>
<h3>Регистрация на сайте</h3>
<--------Под себя изменить-------->
<div align="center">
<input type="" class="" id="" placeholder="Имя">
<input type="" class="" id="" placeholder="Фамилия">
<button onclick="" class="" >Зарегистрироваться</button>
</div>
<---------------->
</div>
</div>
css код
.overlay-container{
display: none;
content: " ";
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
background: -moz-radial-gradient(center, ellipse cover, rgba(127,127,127,0) 0%, rgba(127,127,127,0.9) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(127,127,127,0)), color-stop(100%, rgba(127,127,127,0.9)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(127,127,127,0) 0%, rgba(127,127,127,0.9) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(127,127,127,0) 0%, rgba(127,127,127,0.9) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(127,127,127,0) 0%, rgba(127,127,127,0.9) 100%);
background: radial-gradient(center, ellipse cover, rgba(127,127,127,0) 0%, rgba(127,127,127,0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007f7f7f', endColorstr='#e67f7f7f', GradientType=1 );
}
.window-container{
display: block;
background: #fcfcfc;
margin: 8em auto;
float:none;
width: 500px;
padding: 10px 20px 20px;
text-align: left;
z-index: 3;
border-radius: 3px;
box-shadow: 0px 0px 30px rgba(0,0,0,0.2);
-webkit-transition: 0.4s ease-out;
-moz-transition: 0.4s ease-out;
-ms-transition: 0.4s ease-out;
-o-transition: 0.4s ease-out;
transition: 0.4s ease-out;
opacity: 0;
}
.window-container-visible {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.window-container .box-close {
text-align: right;
}
.window-container h3 {
margin: 1em 0 0.5em;
font-family: "Oleo Script";
font-weight: normal;
font-size: 25px;
text-align: center;
}
И библиотека jquery.lib.js
