テキストボックスのようなfacebookをJqueryで実現するには

Question

gifのリンクにあるように、facebook postのテキストボックスのようなものを探しています。

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

Xアイコンでclickにあなただけのshow()ドットでのボタンに添付click上のテキスト入力と同じ方法に添付focusイベントのダイアログ、およびhide()こと、または最終的にテキスト入力のblurにあります。