Web programming tips and tricks : POPup

This Code Passing Different value same dynamic/static Page without query string in Lightbox Form Using JavaScript.Using Following code save as .html/ any script Language like .php etc.

<!DOCTYPE html>
<html>
<head>
<title>
Different value Passing without query string in Lightbox POP

</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style>

#shadowing
{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #64D272;
z-index:10;
opacity:0.5;
filter: alpha(opacity=50);
}

#box
{
display: none;
position: fixed;
top: 20%;
left: 20%;
width: 270px;
height: 150px;
padding: 10px 0 0 8px;;
margin:0;
border: 1px solid black;
background-color: white;
z-index:101;
overflow: auto;
}

#boxtitle
{
position:absolute;
float:center;
top:0;
left:0;
width:277px;
height:24px;
padding:0;
padding-top:4px;
left-padding:8px;
margin:0;
border-bottom:4px solid #3CF;
background-color: #800040;
color:white;
text-align:center;
}

.btn_close
{

position:relative;
top:-15px;
right:-232px;
z-index:99999px;
}

</style>
<script language="javascript" type="text/javascript">
function openbox(formtitle, fadin)
{

var box = document.getElementById('box');
document.getElementById('shadowing').style.display='block';

var btitle = document.getElementById('boxtitle');
// var btitle2 = document.getElementById('boxtitle');
btitle.innerHTML =formtitle;

var abc=btitle.innerHTML.toLowerCase();
abc= abc.replace(/^\s+|\s+$/g,"");
abc= abc.replace(/[^a-zA-Z 0-9]+/g,'');
abc= abc.replace(/ /g,"-");
abc= abc.replace(/---/g,"-");
abc= abc.replace(/--/g,"-");

document.form1.pdf_name.value = abc;

//document.form1.pdf_name.value = ;

if(fadin)
{
gradient("box", 0);
fadein("box");
}
else
{
box.style.display='block';
}
}

// Close the lightbox

function closebox()
{
document.getElementById('box').style.display='none';
document.getElementById('shadowing').style.display='none';
}

function gradient(id, level)
{
var box = document.getElementById(id);
box.style.opacity = level;
box.style.MozOpacity = level;
box.style.KhtmlOpacity = level;
box.style.filter = "alpha(opacity=" + level * 100 + ")";
box.style.display="block";
return;
}

function fadein(id)
{
var level = 0;
while(level <= 1)
{
setTimeout( "gradient('" + id + "'," + level + ")", (level* 1000) + 10);
level += 0.01;
}
}

</script>

</head>

<body>
<h1>Form open in a Lightbox Using Sample Javascript</h1>

<p> <B>Different value passing without Query String </B><b><br><br><br>
Link Test Ex 1 (with fading effect) <a href="#" onClick="openbox('Test Box1', 1)">click here1</a>. <br><br>

Link Test Ex 2 (with fading effect) <a href="#" onClick="openbox('Test Box2', 1)">Click here2</a>. <br><br>

Link Test Ex 3 (withot fading effect) <a href="#" onClick="openbox('Test Box3', 0)">Click here3</a>. <br><br>

Link Test Ex 4 (withot fading effect) <a href="#" onClick="openbox('Test Box4', 0)">Click here4</a>. <br><br>


<div id="shadowing"></div>

<div id="box">
<form method="POST" action="#" target="_parent" name="form1">
<span id="boxtitle"></span>
<table cellpadding="2"        cellspacing="2" >
<tr><td><a href="#" onClick="closebox()" ><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></td><td>
<input type="hidden" name="pdf_name" value="" maxlength="60" size="25"> </a>
</td> </tr>
<tr><td>Name: </td><td>
<input type="text" name="fname" value="" maxlength="60" size="25" >
</td> </tr>
<tr><td>Email : </td><td>
<input type="text" name="email" value="" maxlength="60" size="25">
</td> </tr>
<tr><td colspan="2" style="text-align:center" align="center">      <input type="submit" name="submit" class="buttonnewlink">
<input type="button" name="cancel" value="Cancel" onClick="closebox()">
</td></tr>
</table>
</form>
</div>

</body>
</html>

Thursday, September 26, 2013

Different value Passing without query string in Lightbox POP