My app has a modal dialog with an iframe inside it. I've written my jQuery code such that when the dialog opens, it sets the appropriate 'src' attribute of the iframe so the content loads up. However, during the delay between the dialog opening and the content loading, the iframe appears conspicuously as a white box. I'd prefer the iframe have a transparent background.
I've tried setting allowtransparency="yes" on the iframe. Any ideas? Thanks!
This question is related to
iframe
background
transparent
<style type="text/css">
body {background:none transparent;
}
</style>
that might work (if you put in the iframe) along with
<iframe src="stuff.htm" allowtransparency="true">
Why not just load the frame off screen or hidden and then display it once it has finished loading. You could show a loading icon in its place to begin with to give the user immediate feedback that it's loading.
Set the background color of the src to none and allow transparencey.
[WITHIN SCR PAGE STYLE]
<style type="text/css">
body
{
background:none transparent;
}
</style>
[IFRAME]
<iframe src="#" allowtransparency="true">Error, iFrame failed to load.</iframe>
NOTE: I code my CSS a little different to how everyone else does.
I've used this creating an IFrame through Javascript and it worked for me:
// IFrame points to the IFrame element, obviously
IFrame.src = 'about: blank';
IFrame.style.backgroundColor = "transparent";
IFrame.frameBorder = "0";
IFrame.allowTransparency="true";
Not sure if it makes any difference, but I set those properties before adding the IFrame to the DOM. After adding it to the DOM, I set its src to the real URL.
Source: Stackoverflow.com