Friday 14 March 2014

Filled Under:

How to create Facebook Style popup with CSS

               if you want to display facebook type popup in your website than don't worry in this post i have create a beautiful facebook type popup just using few simple css.just use below code or free download complate example to get facebook type popup.

CSS

.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


<div class="facebook_window">
<div class="facebook_title">Subscribe Easyscript4u.com</div>
<div class="facebook_message">
if you want to display <a href="http://www.easyscript4u.com">facebook</a> type popup in your website than don't worry in this post i have create a beautiful
facebook type popup just using few simple css.just use below code or free download complate example to get facebook
type popup.
</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>





0 comments:

Post a Comment