如何在JQuery中實現類似於文本框的facebook

Question

我正在尋找像gif鏈接中顯示的那樣實現類似Facebook的發佈文本框。

https://media.giphy.com/media/3oz8xCPR8uJyqZv7Gw/source.gif

當用戶點擊文本輸入，對話式的重點是與文本框下方啓用的選項的文本框中給出。

Answer 1

最佳實現方法是，

1）在文本框中創建一個偵聽器。

2）偵聽器觸發焦點事件並創建疊加框。

3）覆蓋焦點獲得前一個的計算高度。

4）把它放在絕對位置

完成。

Answer 2

看起來很吃驚。 點擊後，會在此框中添加一些額外的類，它將位置更改爲固定或絕對+帶有黑色重疊的某個div顯示在其下。

很簡單的例子：

$('textarea').on('focus', function(){ 
    $('#textarea-holder').addClass('on-top'); 
    $('#black-background').fadeIn(100); 
}); 

Answer 3

你只show()對話框附加到文本輸入和同樣的方法在連接到用點按鈕clickfocus事件，hide()它click在X圖標，或最終在blur上輸入文字。