• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 844
  • Last Modified:

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>

Open in new window

0
Shaye Larsen
Asked:
Shaye Larsen
  • 3
  • 3
2 Solutions
 
KuldeepchaturvediCommented:
every Iframe/frame contains a document in itself.. so given that.. it will be working for that frame only..

other way is to make your cover's hight & width absolute ( i.e. 1024 X 768) if you are using that resolution on screen
0
 
Shaye LarsenAuthor Commented:
but i have seen this done in FCK editor.  Their popup takes over the whole page, no matter how far nested into iframes.

See here for an example
http://www.fckeditor.net/demo/toolbar

Click on one of the add options and you will see a layer take over the screen and the dialog comes up.  In the code, that toolbar is in an iframe.
0
 
KuldeepchaturvediCommented:
did you try it with absolute size ( i.e. 1024 X 768)
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Shaye LarsenAuthor Commented:
I'm not sure what good that would do unless I had a script that detected current browser size.  Did you see the fckeditor example.  When you stretch the browser, it takes about 2 seconds and extends the transparent style.
0
 
KuldeepchaturvediCommented:
I did check that. probably they are using some kind of plugin or HTC. I am not well versed in either of those..

Also window.screen.width and window.screen.hight should give you the browser size..

http://www.javascriptkit.com/howto/newtech3.shtml
0
 
Shaye LarsenAuthor Commented:
Got it working.  I dumped the popup I was working with and implemented a jquery popup that works great.  Other than I am having some display problems with it in IE.

Here is the link to that question.
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_24180561.html
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now