Drop Down Animate聯繫信箱

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。