Выпадающий Анимационный Контакт

Question

Я весь день искал способ сделать контактную форму похожей на форму на этом сайте: http://45royale.com/ Если вы нажмете на кнопку контакта, черный фон исчезнет, ​​и из выпадающего с легкостью упадет функция. Я просматривал код, пытаясь понять, что делать, но я застрял, и я также искал и другие всплывающие окна javascript, но до сих пор кажется, что они используют только php для формы, однако этот вызывает html.

Какие-либо предложения?

Answer 1

Вот что-то вроде формы в примере: http://jsfiddle.net/ep39v/3/. И источник:

HTML

<div class="form"></div>
<button id="showFormBtn">Show form</button>
​

JavaScript

var form = $('.form');

$('#showFormBtn').click(function () {
    fadeBackground(showForm);
});

(function () {
    form.css({
        top: -form.height(),
        left: ($(document.body).width() - form.width()) / 2
    });
}());

function fadeBackground(callback) {
    var background = $('<div class="background"></div>');
    $(document.body).append(background);
    background.fadeTo(300, 0.5, function () {
        if (typeof callback === 'function') {
            callback();
        }
    });        
}

function showForm() {
   var form = $('.form');
    form.animate({ top: 10 }, 1500, 'easeOutElastic');
}
​

CSS

.form {
    width: 30%;
    height: 40%;
    background: black;
    position: absolute;
}
body {
    height: 100%;
}
.background {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: black;
    opacity: 0;
}​

Может быть, вам нужно изменить только смягчение.