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 .