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>





1 comments:

  1. Data science is a fast-moving field – if you’re pursuing a data science career, or even if you’re just interested in data-related topics, you need to invest time to keep up with the trends. Following a few top blogs is a great way to stay abreast of developments in data analysis, statistical software, data visualization, and more. These AUTOMATIONMINDS bloggers consistently offer great resources and tutorials, along with opportunities to connect with and learn from other leading data science professionals.
    DATA SCIENCE training in chennai


    ReplyDelete