Modal Popup
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#load
{
background:url(images/opacity.png);
width:100%;
height:2000px;
z-index:11;
position:absolute;
top:0px;
left:0px;
}
#popup
{
width:400px;
height:300px;
background-color:Silver;
position:absolute;
top:150px;
left:250px;
text-align:center;
display:none;
padding:10px;
font-family:Arial, Helvetica, sans-serif;
border:solid 4px Gray;
}
#popup b
{
font-weight:normal;
text-transform:uppercase;
color:#FF0000;
}
a
{
text-decoration:none;
color:#0099CC;
}
a:hover
{
color:#990000;
}
p a
{
float:right;
}
p span
{
display:block;
float:left;
}
</style>
<script type="text/javascript" language="javascript">
function showPopup()
{
document.getElementById("load").style.display = 'block';
document.getElementById("popup").style.display = 'block';
document.getElementById("popup").style.zIndex = '12';
}
function hidePopup()
{
document.getElementById("popup").style.display = 'none';
document.getElementById("load").style.display = 'none';
// document.body.style.filter = 'alpha(opacity="100")';
// document.body.style.opacity = '0.10';
}
function loading()
{
document.getElementById("load").style.display = 'none';
document.body.style.opacity = '0.9';
}
window.onload = loading;
</script>
<title>Modal Popup</title>
<script language="javascript" type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="load">
<div style="margin-top:200px; margin-left:300px;" >
<img src="images/loading_big.gif" alt="loading" />
<h1 style="color:#8B7637;">Javascript Popup</h1>
<br /><br />
</div>
</div>
<a href="#" onclick="showPopup();">Show Popup</a>
<div id="popup">
<p>
Hello... This is a popop.. in javascript...
A simple javascript popup. Very easy to learn and veary easy to create.
Just read the code. The code is simple and self explanatory....
<br /><br /><br /><br />
<b>
To see its better result first run it in IE....
</b>
<br /><br /><br />
Thank you .....!<br /><br />
<span>
By : Anish Gurkant Singh Rana
</span>
<br /><br />
<a href="#" onclick="hidePopup();">Close</a>
</p>
</div>
</body>
</html>
Download complete code from here..
https://yrwqfa.bay.livefilestore.com/y1pcaaP_6a1iNzTI9P1iV_83szkJ6lTlVPreE3hBPho3LlyOon3JavXZh6nLavs7ctAQqG6qGn5r6tG8YuNQVqYcifiVCYjEnPN/modalpopup.rar?download&psid=1
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#load
{
background:url(images/opacity.png);
width:100%;
height:2000px;
z-index:11;
position:absolute;
top:0px;
left:0px;
}
#popup
{
width:400px;
height:300px;
background-color:Silver;
position:absolute;
top:150px;
left:250px;
text-align:center;
display:none;
padding:10px;
font-family:Arial, Helvetica, sans-serif;
border:solid 4px Gray;
}
#popup b
{
font-weight:normal;
text-transform:uppercase;
color:#FF0000;
}
a
{
text-decoration:none;
color:#0099CC;
}
a:hover
{
color:#990000;
}
p a
{
float:right;
}
p span
{
display:block;
float:left;
}
</style>
<script type="text/javascript" language="javascript">
function showPopup()
{
document.getElementById("load").style.display = 'block';
document.getElementById("popup").style.display = 'block';
document.getElementById("popup").style.zIndex = '12';
}
function hidePopup()
{
document.getElementById("popup").style.display = 'none';
document.getElementById("load").style.display = 'none';
// document.body.style.filter = 'alpha(opacity="100")';
// document.body.style.opacity = '0.10';
}
function loading()
{
document.getElementById("load").style.display = 'none';
document.body.style.opacity = '0.9';
}
window.onload = loading;
</script>
<title>Modal Popup</title>
<script language="javascript" type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="load">
<div style="margin-top:200px; margin-left:300px;" >
<img src="images/loading_big.gif" alt="loading" />
<h1 style="color:#8B7637;">Javascript Popup</h1>
<br /><br />
</div>
</div>
<a href="#" onclick="showPopup();">Show Popup</a>
<div id="popup">
<p>
Hello... This is a popop.. in javascript...
A simple javascript popup. Very easy to learn and veary easy to create.
Just read the code. The code is simple and self explanatory....
<br /><br /><br /><br />
<b>
To see its better result first run it in IE....
</b>
<br /><br /><br />
Thank you .....!<br /><br />
<span>
By : Anish Gurkant Singh Rana
</span>
<br /><br />
<a href="#" onclick="hidePopup();">Close</a>
</p>
</div>
</body>
</html>
Download complete code from here..
https://yrwqfa.bay.livefilestore.com/y1pcaaP_6a1iNzTI9P1iV_83szkJ6lTlVPreE3hBPho3LlyOon3JavXZh6nLavs7ctAQqG6qGn5r6tG8YuNQVqYcifiVCYjEnPN/modalpopup.rar?download&psid=1
Comments
Post a Comment