opacity in css affecting other items?

[Xerelon]

I've got a piece of javascript that launches an entire page cover on launch of the page and two divs 'dialog' and 'dialog2' that open on top of the cover. so it's like having a blacked out background with a notification.The problem i'm getting is i want the 'cover' background to be transparent / have an opacity, and it does, but for some reason this is also causing the 'dialog' and 'dialog2' div backgrounds to be transparent, and i don't want this to happen and i'm not sure why this is happening? Can someone tell me what i'm doing wrong please.\[code\]<script type="text/javascript"> window.onload = function showPopUp(el) { var cvr = document.getElementById("cover") var dlg = document.getElementById("dialog") cvr.style.display = "block" dlg.style.display = "block" if (document.body.style.overflow = "hidden") { cvr.style.width = "1024" cvr.style.height = "100%" } } </script> <style type="text/css"> #cover { display:none; position:absolute; z-index:98; left:0px; top:0px; width:100%; height:2648px; background-color:#fff; filter:alpha(Opacity=50); opacity:0.7; -moz-opacity:0.7; -khtml-opacity:0.7; overflow:hidden; } #dialog { background-image: url(http://www.playtimeboys.com/img/packages/account1.png); background-repeat: no-repeat; background-size:311px 187px; height:187px; width:311px; margin-top:300px; margin-left:650px; z-index: 99; position:fixed; } #dialog2 { background-image: url(http://www.playtimeboys.com/img/packages/account1.png); background-repeat: no-repeat; background-size:311px 187px; height:187px; width:311px; margin-top:300px; margin-left:230px; z-index: 99; position:fixed; } </style> </head> <div id="cover"> <div id="dialog"> </div> <div id="dialog2"> </div> <div class="foo"></div> </div> <script type="text/javascript"> $(document).ready(function(){ //To switch directions up/down and left/right just place a "-" in front of the top/left attribute //Vertical Sliding //Caption Sliding (Partially Hidden to Visible) $('.boxgrid.caption').hover(function(){ $(".cover", this).stop().animate({top:'-38px'},{queue:false,duration:200}); }, function() { $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:200}); }); }); </script>\[/code\]