Monday, December 15, 2008

POP up html window, javascript , Css

Number of times, i have tried to make html popup based application... finally i have got very good solution. Here m framing that code, its output is well enough. Take this and paste as it is in notepad and save it as a .html file.. and see the output. To make attractive, u can go for images within CSS.
follow these steps
1. Copy this code in notepad
2. Save notepad file with .html extension
3. Popup application is ready




<html>
<head>
<title>Desktop Provisioining Portal</title>
<style type="text/css">
#child
{
position: absolute;
top: 50%;
left: 50%;
margin-left: -365px;
margin-top: -250px;
z-index: 3;
width: 730px;
height: 520px;
background-color:black;
background-repeat: repeat-x;
border: solid 3px #2c7292;
}
#divTitleBar
{
position: relative;
text-align: right;
width: 100%;
margin-top: 5px;
margin-left: -5px;
}
</style>

<script language="javascript">
function show(HtmlPage)
{
var childDiv=document.getElementById('child');
childDiv.style.display="block";
var childWebPage=document.getElementById('childSite');
childWebPage.src=HtmlPage;

}
function closeChild()
{
var childDiv=document.getElementById('child');
childDiv.style.display="none";

}
</script>

</head>
<body>
Primary Layer Contents
<input type="button" value="window 1" onclick="show('http://artsrajesh.blogspot.com/');" />
<input type="button" value="window 2" onclick="show('http://artsmaths.blogspot.com/');" />
<input type="button" value="window 3" onclick="show('http://artseye.blogspot.com/');" />
<div id="child" style="display: none">
<div id="divTitleBar">
<input type="button" value="close" alt="" onclick="closeChild();" />
</div>
<iframe id='childSite' style="width: 725px; height: 478px;"></iframe>
</div>
</body>
</html>

1 comment:

siddiq said...

Thank you rajesh r.nair,

This is what i m searching for a long time.

But i get easily from you while i m searching another thing.

Thanks again.