hi!! . this is light box without j query. this simple css light box u want to create two just class black_overlay and white_content .black_overlay is to set the background color of full color .white_content is background color of light box.This used simple java script to click to show the light box and close the light box.u content bring to white_content class. it displayed a light box . After run the file to click click here text to display the light box ...!!!
CSS:
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color:#333;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 2px solid #666;
background-color: white;
z-index:1002;
overflow: auto;
}
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color:#333;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 2px solid #666;
background-color: white;
z-index:1002;
overflow: auto;
}
Html:
<p><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Click Here</a></p>
// Your Content
<div id="light" class="white_content"><a href = "javascript:void(0)" onclick ="document.getElementById('light').style.display='none'; document.getElementById('fade').style.display='none'" style="float:right;">Close</a>
Hi
</div>
// Your Content
<div id="light" class="white_content"><a href = "javascript:void(0)" onclick ="document.getElementById('light').style.display='none'; document.getElementById('fade').style.display='none'" style="float:right;">Close</a>
Hi
</div>
Source Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Light box in CSS</title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color:#333;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 2px solid #666;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<p><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Click Here</a></p>
<div id="light" class="white_content"><a href = "javascript:void(0)" onclick ="document.getElementById('light').style.display='none'; document.getElementById('fade').style.display='none'" style="float:right;">Close</a>
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML,but the language can also be applied to any kind of XMLdocument, including plain XML, SVG and XUL.
</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Light box in CSS</title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color:#333;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 2px solid #666;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<p><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Click Here</a></p>
<div id="light" class="white_content"><a href = "javascript:void(0)" onclick ="document.getElementById('light').style.display='none'; document.getElementById('fade').style.display='none'" style="float:right;">Close</a>
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML,but the language can also be applied to any kind of XMLdocument, including plain XML, SVG and XUL.
</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>
No comments:
Post a Comment