I am trying to create a pop-up message that disables the rest of the screen until you confirm it, only by using CSS and JavaScript (and without the alert function).
Although http://msdn.microsoft.com/en-us/library/ie/ms536739%28v=vs.85%29.aspx declares that setAttribute is supported in IE8 and higher, it does not seem to work correctly - well, actually it doesn't seem to work at all.
Here is my code:
<html>
<style type="text/css">
.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;
}
</style>
<script type="text/javascript">
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);
}
</script>
<body>
<input type="button" value="Show message" onclick="showoverlay('Message text')"/>
</body>
</html>
It works just fine in Firefox and Chrome, but IE (testing with IE9) seems to ignore the setAttribute method, because it only puts in the text and the button, but without the formatting (i.e. class was not applied) and also clicking the newly created button does not remove the objects (i.e. either id was not applied, or there is some additional incompatibility with portions of the code that remove the objects).
I tried to replace setAttribute like this:
<script type="text/javascript">
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);
}
</script>
But this time it does not even add the text and the button.
So, how to make this script IE compatible, both showing all the elements and then removing them?
Thanks
See Question&Answers more detail:os
