Question

I am writing a Safari extension. It needs to overlay content from another source on top of the page when I click a button in the toolbar.

How do I position it at the top left corner of the browser, on top of the content? When I click the close button the iframe should be destroyed, displaying the content that was previously covered up?

Thanks!

Answer 1

You can put the CSS either inline or in a stylesheet.

<iframe src="http://path.to/content" style="width: 200px; height: 100px; 
position: absolute; top: 0; left: 0; z-index: 100000;" id="overlay_frame"></iframe>

Then, for your “close” link, you have a choice of either completely destroying the iframe:

<a href="#" onClick="document.getElementById('overlay_frame').removeChild( 
document.getElementById('overlay_frame').childNodes[0] );">Close</a>

or just hiding it:

<a href="#" onClick="document.getElementById('overlay_frame').style.display='none';">Close</a>

Personally, I’d just hide it so you could re-use it again by changing the source:

<a href="#" onClick="document.getElementById('overlay_frame').src='http://link.to/something/else';">Change Frame</a>