How to achieve a facebook like textbox using jQuery?

Question

I am looking to achieve something like facebook post text box as shown in the gif link.

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

When the user clicks on the text input, the dialog style emphasis is given on the textbox with options enabled below the textbox.

Answer 1

Best Way to achieve this is,

1) Create a listener on the text box.

2) Listener fires on focus event and creates an overlay box.

3) The overlay focus get the calc height of previous one.

4) Place it with absolute position

Done.

Answer 2

Looks eazy. On click there is some extra class added to this box, which is changing position to fixed or absolute + some div with black overlay is displayed under it.

Very simple example:

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

Answer 3

您只需在附加到文本输入的focus事件上show()对话框， click在click带有圆点的按钮时click相同的方法， click在click X图标或最终在文本输入上blur时将其hide() 。