Css3 and Javascript based Inline Model Box Tweet

After a long time i plan to blog again. But this time i will never quit and also provide some quality tutorials, freebies , tips and trick etc.

The entry of css3 help many designer and also reduce their work.So today in this lesson we are going to see , How to create a In line model box with CSS3 AND JS only.




I have also provided the source code so you can reuse this in your web project.

Live Demo

Download



Html Code

In Html Section you nedd to call a function and pass a div id as a parameter

onclick="return ShowHide('popup');

Here ShowHide is javascript function and popup is a id of a div that i want to be a model box.

CSS Code

Css is the important part in this project.Actually to get shadow effect and to position the div any where in the page.

z-index=+999999;
position:absolute;
left:400px;
top:200px;
padding:10px;
display:none;
width:400px;
height:200px;
background: #FFFFFF;
box-shadow: 5px 5px 5px #ccc;
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;

z-index help to overlap the popup div from the body div.And position,left,top help for

positioning.And box-shadow , -moz-box-shadow ,-webkit-box-shadow for giving shadow effect.

Javascript Code

Javascript play a important role in this project.

function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
document.bgColor="#CCC" ;
}
else
{
document.getElementById(divId).style.display = 'none';
document.bgColor="#FFFFFF" ;
}
}

Here in javascript document.bgColor give the background blur effect while popup div id active.

Live Demo

Download