javascript - 下拉动画联系人框

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

可能你只需要改变easing。