Another way around the transparency issue is to use a 50% opaque PNG as your div background image. Replace this:
<style>
#displaybox {
z-index: 10000;
filter: alpha(opacity=50); /*older IE*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
-moz-opacity: .50; /*older Mozilla*/
-khtml-opacity: 0.5; /*older Safari*/
opacity: 0.5; /*supported by current Mozilla, Safari, and Opera*/
background-color:#000000;
position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
}
With this:
<style>
#displaybox {
z-index:10000;
background-image:url(‘images/img_50grey.png’);
background-repeat: repeat;
position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
}
Where “img_50grey.png” is a black 1×1 pixel png with the transparency set to 50%. Text and images that you put in ‘innerHTML’ will no longer inherit the transparency of the displaybox.