Geek Answers Handbook

AppendChild not working correctly in IE

I am trying to create a simple modal window, but IE is not cooperating. When I call this function in IE, the content appears at the bottom of the page under all the content, and the overlay image does not appear. Here is the code:

function applyOverlay(src) { var my_overlay = document.createElement('div'); my_overlay.setAttribute('id','myoverlay'); var doc_height = document.body.scrollHeight; my_overlay.setAttribute('style','text-align:center; position:fixed; top:0px; left:0px; background-image:url("images/trbg.png"); width:100%; height:'+doc_height+'; z-index:999;'); my_overlay.innerHTML="<iframe style='background:none;' frameborder=0 height='100%' width='80%' src='"+src+"'><iframe>"; document.body.appendChild(my_overlay); }
+4
source share
1 answer

This is a common problem with IE. It is annoying but manageable.

If document.body.appendChild is executed in the body tag before closing the body, IE6 simply will not load the page. 7 and 8 will wait for the page to load

So, how to approach this problem?

  • Wait for the body to load using body.onload .
  • add an element to another element instead of the body tag.

I recommend the second option. Adding elements to another target element will preserve the intended behavior and will not change the way you add your elements to the site.

+3
source

More articles:


All Articles