Facebook Style Chat Box Popup Layout Design Using JQUERY and CSS

Today we are going to discuss how to create facebook style chat box popup box using HTML and CSS. Here we have implemented and provided simple example for facebook style chat box popup and layout design for the chat box is way more easier and simple. You can easily use and integrate this example in your websites.
We have used Fixed position property of css to display the chat box one after another, by this way it will not effect the other css layout design.

Feature for this chat box popup :

With the help of this you can perform multi user chat in single web page.

You can close the chat session whenever required.

You can minimize the chat pop-up box.

The Latest chat box, should be displayed at right most corner.

Facebook Style Chat Box Popup Example :

Lets see the complete and simple example to create chat box layout :

index.html
This consists of HTML layout design.

<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Facebook like chat popup layout</title><linkhref="style.css"rel="stylesheet"><scriptsrc="jquery-1.10.1.min.js"></script><scriptsrc="script.js"></script></head><body><divclass="msg_box"style="right:50px"rel="skp"><divclass="msg_head">Sumit Kumar Pradhan
<divclass="close">x</div></div><divclass="msg_wrap"><divclass="msg_body"><divclass="msg-left">What is up ? </div><divclass="msg-right">Playing video game, you say</div><divclass="msg-left">can i join you ? </div><divclass="msg_push"></div></div><divclass="msg_footer"><textareaclass="msg_input"rows="4"></textarea></div></div></div><divclass="msg_box"style="right:310px;"rel="skp1"><divclass="msg_head">Amit Kumar Singh
<divclass="close">x</div></div><divclass="msg_wrap"><divclass="msg_body"><divclass="msg-left">What is up ? </div><divclass="msg-right">Playing video game, you say</div><divclass="msg-left">can i join you ? </div><divclass="msg_push"></div></div><divclass="msg_footer"><textareaclass="msg_input"rows="4"></textarea></div></div></div><divclass="msg_box"style="right:570px;"rel="skp2"><divclass="msg_head">Neeraj Tiwari
<divclass="close">x</div></div><divclass="msg_wrap"><divclass="msg_body"><divclass="msg-left">What is up ? </div><divclass="msg-right">Playing video game, you say</div><divclass="msg-left">can i join you ? </div><divclass="msg_push"></div></div><divclass="msg_footer"><textareaclass="msg_input"rows="4"></textarea></div></div></div><divclass="msg_box"style="right:830px;"rel="skp3"><divclass="msg_head">Sourav singh
<divclass="close">x</div></div><divclass="msg_wrap"><divclass="msg_body"><divclass="msg-left">What is up ? </div><divclass="msg-right">Playing video game, you say</div><divclass="msg-left">can i join you ? </div><divclass="msg_push"></div></div><divclass="msg_footer"><textareaclass="msg_input"rows="4"></textarea></div></div></div><divclass="msg_box"style="right:1090px;"rel="skp4"><divclass="msg_head">Albert rod
<divclass="close">x</div></div><divclass="msg_wrap"><divclass="msg_body"><divclass="msg-left">What is up ? </div><divclass="msg-right">Playing video game, you say</div><divclass="msg-left">can i join you ? </div><divclass="msg_push"></div></div><divclass="msg_footer"><textareaclass="msg_input"rows="4"></textarea></div></div></div></body></html>

script.js
This is a most integral part of the chat application, with help of this you can perform below operation:
1. You can close the chat box by clicking on "X" symbol.
2. You can minimize the chat box by clicking on chat box head.
3. You can send the new chat message to desired user, by entering the text in textarea box.

This is all about facebook style chat box popup box layout design. Hope you like this simple example. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.