If you are in love with facebook and want to add dialog box like facebook in your website then i have a simple and easy css based dialog of facebook style for you.

CSS

Use this css in your file for box designs.

.facebook_window
{
background-color:white;
width: 445px;
min-height: 120px;
border: 1px solid #535156;
border-top: 0px;
border-radius:2px;
box-shadow : 0px 0px 0px 10px rgba(115,115,115,0.8);
}

.facebook_title
{
font: 14px Verdana;
color: #fff;
background-color: #6d84b4;
border: 1px solid #3b5998;
font-weight: bold;
margin: -1px;
margin-bottom: 0;
padding: 5px 10px;
}

.facebook_message
{
width: 425px;
min-height: 30px;
padding: 10px;
margin: 0px;
font: 11px Verdana, Arial, Helvetica, sans-serif;
background-color: #fff;
}

.facebook_container
{
height: 42px;
line-height: 42px;
width: 100%;
margin: 0px;
margin-top: -1px;
padding: 0px;
background-color: #f2f2f2;
border-top: 1px solid #e6e6e6;
text-align: right;
}

.s_btn
{
border: 1px solid #666;
border-top-color: #e7e7e7;
border-left-color: #e7e7e7;
background-color: #f7f7f7;
padding-top:1px;
padding-left:4px;
padding-right:4px;
padding-bottom:2px;
cursor: pointer;
font-size: 13px;
font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
font-weight: bold;
border:1px solid gray;
text-align:center;
}

.b_btn
{
color:#FFFFFF;
background-color:#5c75a9;
padding-top:1px;
padding-left:4px;
padding-right:4px;
padding-bottom:2px;
cursor: pointer;
font-size: 13px;
font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
font-weight: bold;
border:1px solid black;
text-align:center;
}

.g_btn
{
background-color:#68a64c;
color:#ffffff;
padding-top:1px;
padding-left:4px;
padding-right:4px;
padding-bottom:2px;
cursor: pointer;
font-size: 13px;
font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
font-weight: bold;
border:1px solid black;
text-align:center;
}

 HTML

HTML DIV for the facebook dialog box

<div class="facebook_window">
<div class="facebook_title">Subscribe PHP Gang</div>
<div class="facebook_message">
If you are in love with <a href="https://www.phpgang.com">facebook</a> and want to add dialog box like facebook in your website then i have a simple and easy css based dialog of facebook style for you.
</div>

<div class="facebook_container">
<input type="button" value="CSS" class="g_btn">&nbsp;
<input type="button" value="Friends" class="b_btn">&nbsp;
<input type="button" class='s_btn' value="Cancel">
&nbsp;
</div>

class="facebook_window"

Class for main outer div.

class="facebook_title"

Title of the box.

class="facebook_message"

Message container where you add your messages.

class="facebook_container"

Class for bottom container in this container we add buttons.