How to Create a Facebook Like Chat Panel Interface in C# ASP.NET using CSS

Create a Panel Like this :-

  <asp:Panel runat="server" ID="pnlPopUp" CssClass="chatPanel">
        <div class="chatName flip">
            Chat Person Name
  <asp:ImageButton ID="imgbtnClose" runat="server" ImageUrl="~/images/LightBox/close.png" OnClick="imgbtnClose_Click" CssClass="closeChat" ToolTip="Close" />
        </div>
        <div class="slidetogle">
            <div class="messagehistory">
                Message History will show here.
            </div>
            <div class="newmessage">
                Enter your message here...
            </div>
        </div>
    </asp:Panel>

Css Classes For this Panel :-

.messagehistory {
            background-color: #F0F9FF;
            height: 230px;
            color: Gray;
            border-bottom: 1px solid gray;
            overflow: auto;
        }


        .newmessage {
            background-color: #F0F6FF;
            height: 40px;
            color: Gray;
        }


        .chatPanel {
            width: 280px;
            max-height: 300px;
            bottom: 0px;
            right: 35%;
            position: fixed;
            z-index: 20;
            border: 1px solid gray;
            display: inline-block;
        }


        .chatName {
            width: 100%;
            border: 1px solid gray;
            height: 30px;
            text-align: center;
            background-color: rgb(37,152,196);
            font-size: medium;
            color: White;
        }


        .closeChat {
            margin-left: 30%;
            height: 60%;
            padding-top: 2px;
        }

That’s it!!…..Happy Programming...