23:39
Merbin Joe
Iframe popu window
The following code will teach you how to access the popup window from inside iframe window it is very easy to do, all functions are call using parent.func_name().When you run the below program should all the iframe url are same port and you can't able to see the exact output without any local or any other server, if you trying to access through local file system it will show "Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match." error.
index.html
<html>
<head>
<style>
.black_overlay{display:none;position:absolute;top:0%;left:0%;width:100%;height:100%;background-color:black;z-index:1001;-moz-opacity:0.6;opacity:.60;filter:alpha(opacity=60);}
.white_content{position:absolute;top:25%;left:20%;z-index:1002;background:white;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function frm_pp()
{
$(".black_overlay").show();
}
function closeallpp()
{
$(".black_overlay").hide();
}
</script>
</head>
<body>
Im the First Window
<br>
<iframe class="white_content" width="400px" height="400px" id="frme1" src="frame1.html" scrolling="no"></iframe>
<div class="black_overlay"></div>
</body>
</html>Frame1.html
<html>
<head>
<style>
.black_overlay{display:none;position:absolute;top:0%;left:0%;width:100%;height:100%;background-color:black;z-index:1001;-moz-opacity:0.6;opacity:.60;filter:alpha(opacity=60);}
.white_content{position:absolute;top:25%;left:20%;z-index:1002;background:white;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function frm_pp1()
{
$(".black_overlay").show();
parent.frm_pp();
}
function closeallpp1()
{
$(".black_overlay").hide();
parent.closeallpp();
}
</script>
</head>
<body>
<input type="button" onclick="frm_pp1();" value="Im in center frame">
I am the second Window
<iframe class="white_content" id="frme1" src="frame2.html" scrolling="no"></iframe>
<div class="black_overlay"></div>
</body>
</html>Frame2.html
<html>
<head>
<style>
.black_overlay{display:none;position:absolute;top:0%;left:0%;width:100%;height:100%;background-color:black;z-index:1001;-moz-opacity:0.6;opacity:.60;filter:alpha(opacity=60);}
.white_content{display:none;position:absolute;top:25%;left:20%;z-index:1002;background:white;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function frm_pp2()
{
$("#ppwndow").show();
$(".black_overlay").show();
parent.frm_pp1();
}
function closeallpp2()
{
$("#ppwndow").hide();
$(".black_overlay").hide();
parent.closeallpp1();
}
</script>
I am the third window
<input type="button" value="Open Popup" onclick="frm_pp2();">
<div class="white_content" style="" id="ppwndow">
<input type="button" value="Close Popup" onclick="closeallpp2();">
<br><br><br>
This is the Third Iframe Popup
</div>
<div class="black_overlay" style="display:none;">
</div>
</body>
</html>
Posted in 
0 comments:
Post a Comment