first create popup.php file
popup.php file content given below..
<script type="text/javascript" src="lightbox-form.js"></script> // this js is given below and put same directory where your popup.php file is found.
<script src="jquery-1.4.4.js" type="text/javascript"></script> // this js download from google and put same directory where your popup.php file is found.
<script language="javascript">
function show(id)
{
var a = document.getElementById("storeid").value = id;
//alert(a);
//alert(" function call");
$.ajax({
url: "newspost.php?id="+a,
cache: true,
success: function(html){
$("#box").html(html);
openbox(1);
},
});
document.getElementById("insrt1").style.display="block";
document.getElementById("insrt").style.display="block";
return false;
}
function hide()
{
document.getElementById("insrt1").style.display="none";
document.getElementById("insrt").style.display="none";
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8">
<style>
#shadowing
{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
z-index:10000;
opacity:0.8;
filter: alpha(opacity=80);
background:url(../images/dimBg.png);
}
#box
{
display: none;
position: fixed;
top: 30%;
left: 35%;
margin:0;
border-radius: 6px 6px 6px 6px;
width:500px;
height:300px;
z-index:10001;
}
</style>
</head>
<body id="page1">
<div id="shadowing"></div>
<div id="box"></div>
<!-- header -->
</header>
<!-- content -->
<section id="content">
<a href="javascript:void(0)" id='' onclick="return show(this.id)">more</a>
</section>
<input type="hidden" name="storeid" id="storeid">
<!-- footer -->
</body>
</html>
create newpost.php file
newpost.php file content....
<div class="bg-2" style="padding:0; border:solid 5px #777; box-shadow: 0px 0px 14px #333;">
<div class="main">
<div class="wrapper margin-bot">
<div class="col-1">
<div class="header_pop" style="width:500px;"><div style="padding:12px;">News</div>
<img id="add_img" style="float:right; z-index:9999; cursor:pointer; margin-top:-35px; margin-right:4px;" onclick="closebox()" src="images/top_up/dashboard/close_link.png" height="25" width="25">
</div>
<h3 class="p2" style="margin-left:25px;"></h3>
<div class="wrapper" style="margin-left:25px; text-align:justify;">
<figure class="img-indent4"><img src="admin/upload/product_img/" height="86" width="83" alt=""/></figure>
<div class="extra-wrap">
</div>
</div>
</div>
</div>
</div>
</div>
lightbox.js content
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* 1500) + 10);
level += 0.01;
}
}
// Open the lightbox
function openbox(fadin)
{
var box = document.getElementById('box');
box.style.visibility="visible";
document.getElementById('shadowing').style.display='block';
if(fadin)
{
gradient("box", 0);
fadein("box");
}
else
{
box.style.display='block';
}
}
// Close the lightbox
function closebox()
{
document.getElementById('box').style.visibility="hidden";
document.getElementById('box').style.display='none';
document.getElementById('shadowing').style.display='none';
}
0 comments:
Post a Comment