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。

下拉动画联系人框

1 个答案: