如何在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上输入文字。