call javascript sitting on top from a nested iframe

I have a popup script that is supposed to make the background of the webpage transparent and display a dialog box.

The link to call this script sits in a nested iframe.  If I put the script on the iframe it will work, but it will only make that iframe transparent. I need the whole page to be transparent and the dialog box to appear over the whole page, not just the iframe it was called from. Right now I have the script, the styles, and the dialog code sitting on the top page, with just the link sitting on the nested iframe.

See code below.

Here is the script.
 
<script type="text/javascript">
function showPopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)
cvr.style.display = "block"
dlg.style.display = "block"
if (document.body.style.overflow = "hidden") {
cvr.style.width = "1024"
cvr.style.height = "100%"
}
}
function closePopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)
cvr.style.display = "none"
dlg.style.display = "none"
document.body.style.overflowY = "scroll"
}
</script>
 
 
Here are the script styles
 
<style type="text/css">
#cover {
display:none;
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background:gray;
filter:alpha(Opacity=50);
opacity:0.5;
-moz-opacity:0.5;
-khtml-opacity:0.5
}
#dialog {
display:none;
left:200px;
top:200px;
width:300px;
height:300px;
position:absolute;
z-index:100;
background:white;
padding:2px;
font:10pt tahoma;
border:1px solid gray
}
</style>
 
 
Here is the dialog code.
 
<div id="cover"></div>
<div id="dialog">
Content goes here
<br><input type="text">
<br><input type="button" value="Submit">
<br><a href="#" onclick="closePopUp('dialog');">[Close]</a>
</div>
 
 
And here is the link. (Sits on nested iframe)
 
<a class="sitenavlinkstext" href="#" target="_top" onclick="showPopUp('dialog');">Delete This Site</a>

Select allOpen in new window