title: Replace setAttribute with IE compatible script
body: <p>I am trying to create a pop-up message that disables the rest of the screen until you confirm it, <strong>only by using CSS and JavaScript</strong> (and without the <code>alert</code> function).</p>
  
  <p>Although <a href="http://msdn.microsoft.com/en-us/library/ie/ms536739%28v=vs.85%29.aspx" rel="nofollow">http://msdn.microsoft.com/en-us/library/ie/ms536739%28v=vs.85%29.aspx</a> declares that <code>setAttribute</code> is supported in IE8 and higher, it does not seem to work correctly - well, actually it doesn't seem to work at all.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;style type="text/css"&gt;
  
  .overlay
  {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.2);
  }
  
  .overlaytext
  {
  position: absolute;
  left: 50%;
  margin-left: -150px;
  top: 50%;
  margin-top: -50px;
  width: 300px;
  height: 100px;
  padding-top: 5px;
  background-color: #777777;
  color: #000000;
  font-size: 20px;
  text-align: center;
  }
  
  .overlaybutton
  {
  position: absolute;
  left: 50%;
  margin-left: -30px;
  top: 50%;
  margin-top: 20px;
  width: 60px;
  height: 25px;
  border: solid;
  border-color: #000000;
  border-width: 1px;
  background-color: #999999;
  color: #000000;
  font-size: 20px;
  }
  
  &lt;/style&gt;
  
  &lt;script type="text/javascript"&gt;
  
  function showoverlay(message)
  {
  var overlay = document.createElement('div');
  overlay.setAttribute('id','overlay');
  overlay.setAttribute('class','overlay');
  document.body.appendChild(overlay);
  
  var overlaytext = document.createElement('div');
  overlaytext.setAttribute('id','overlaytext');
  overlaytext.setAttribute('class','overlaytext');
  overlaytext.innerHTML = message;
  document.body.appendChild(overlaytext);
  
  var overlaybutton = document.createElement('input');
  overlaybutton.setAttribute('type','button');
  overlaybutton.setAttribute('id','overlaybutton');
  overlaybutton.setAttribute('class','overlaybutton');
  overlaybutton.setAttribute('value','OK');
  overlaybutton.setAttribute('onclick','deleteoverlay()');
  document.body.appendChild(overlaybutton);
  }
  
  function deleteoverlay()
  {
  var elem = document.getElementById('overlay');
  elem.parentNode.removeChild(elem);
  elem = document.getElementById('overlaytext');
  elem.parentNode.removeChild(elem);
  elem = document.getElementById('overlaybutton');
  elem.parentNode.removeChild(elem);
  }
  
  &lt;/script&gt;
  
  &lt;body&gt;
  
  &lt;input type="button" value="Show message" onclick="showoverlay('Message text')"/&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It works just fine in Firefox and Chrome, but IE (testing with IE9) seems to ignore the <code>setAttribute</code> method, because it only puts in the text and the button, but without the formatting (i.e. <code>class</code> was not applied) and also clicking the newly created button does not remove the objects (i.e. either <code>id</code> was not applied, or there is some additional incompatibility with portions of the code that remove the objects).</p>
  
  <p>I tried to replace <code>setAttribute</code> like this:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  function showoverlay(message)
  {
  var overlay = document.createElement('div');
  overlay.id = 'overlay';
  overlay.class = 'overlay';
  document.body.appendChild(overlay);
  
  var overlaytext = document.createElement('div');
  overlaytext.id = 'overlaytext';
  overlaytext.class = 'overlaytext';
  overlaytext.innerHTML = message;
  document.body.appendChild(overlaytext);
  
  var overlaybutton = document.createElement('input');
  overlaybutton.type = 'button';
  overlaybutton.id = 'overlaybutton';
  overlaybutton.class = 'overlaybutton';
  overlaybutton.value = 'OK';
  overlaybutton.onclick = 'deleteoverlay()';
  document.body.appendChild(overlaybutton);
  }
  
  function deleteoverlay()
  {
  var elem = document.getElementById('overlay');
  elem.parentNode.removeChild(elem);
  elem = document.getElementById('overlaytext');
  elem.parentNode.removeChild(elem);
  elem = document.getElementById('overlaybutton');
  elem.parentNode.removeChild(elem);
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>But this time it does not even add the text and the button.</p>
  
  <p><strong>So, how to make this script IE compatible, both showing all the elements and then removing them?</strong></p>
  
  <p>Thanks</p>