overlay div over iframe

Question

I\'m making a widget similar to the uservoice widgets, except I want the content of the page to be in an iFrame rather than the widget appear via javascript. How can I have

Answer 1

You probably need to add margin:auto; to your iFrame or the floating div. This will make it fill the screen 100%.

Example:

.width {
   position:absolute;
   left:0;
   right:0;
   top:0;
   bottom:0;
   width:250px;
   height:150px;
   margin:auto;
}

To fix it to the left of the browser you can use:

margin:auto auto auto 0;

Good luck!

Answer 2

You could wrap your iframe in a div with a low Z-index and then lay a div over it with a higher z-index.

Answer 3

If you're not loading cross domain then you could just load in using jquery ajax call http://docs.jquery.com/Ajax/load

$(document).ready(function () {
    $("#content").load("page.html");
});

and replace your iframe with

<div id="content"></div>

Answer 4

This worked for me:

• add the overlay div with a high z-index and absolute position
• make the iframe also positioned absolute
• add the iframe inside a div

The div with the overlay:

<div style="z-index:99;position:absolute;top:0;right:0">
  ...overlay html...
</div>

The iframe:

<style>
  iframe {
    position: absolute;
    border: none;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
  }
</style>
<div>
  <iframe src="http://..."> </iframe> 
</div>

Answer 5

That's "clickjacking", isn't it?

Nothing is likely to work long term, as browsers (rightly) see this as a security threat to be prevented.

Answer 6

with this code I get a double scrollbar on the right on the right. One for the website and one for the i-frame.

<style>
  iframe {
    position: absolute;
    border: none;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
  }
</style>
<div>
  <iframe src="http://..."> </iframe> 
</div>