Question

I have been looking all day for a way to make a contact form similar to the one on this site: http://45royale.com/
If you click on the contact button a black background fades in and the from drops down using an ease function. I have been picking through the code trying to see what to do but I am stuck and I have also been looking and other javascript pop ups but so far it seems they only use php for the form however this one calls a html.

Any suggestions?

Answer 1

Here is something like the form in the example: http://jsfiddle.net/ep39v/3/.
And the source:

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

May be you need to change only the easing.