Model Box In JavaScript, Simple JavaScript to create Light Box, Light Box Tutorial in javascript

Now these days Light box / Model box are widely use in website to show content or some other information.

and tutorial provide by website for creating Lightbox or Model box are too complex to alter the things.

Here I am providing simple light box and Model box tutorial with using few lines of script code.

JavaScript Code

function gray_box1() {
document.getElementById('light1').style.display = 'block';
document.getElementById('fade').style.display = 'block';
document.getElementById('fade').style.height='2000px';
}

HTML Code

<div id="fade" class="black_overlay">
div> 

X
 

Hello! this is light box example. 

CSS Code

.white_content {
background-color:white;
border:2px solid #FFFFFF;
display:none;
left:3%;
overflow:auto;
padding:2px;
position:absolute;
text-align:left;
top:35%;
width:450px;
z-index:1002;
}

.black_overlay {
background-color:black;
display:none;
height:100%;
left:0;
opacity:0.4;
filter: alpha(opacity=40);
position:fixed;
top:0;
width:100%;
z-index:1001;
}

Online Link