greying out the background (around a CSS popup)

[seany123]

i have this CSS code:

 

#registration_popup {
    left: 50%;
    margin: -150px 0 0 -256px;
    position: absolute;
    top: 50%;
    width: 513px;
    height: 200px;
    visibility: hidden;
    color: gray;
}

.popup{position:absolute; width: 514px; left:50%; top:50px; z-index:101;}
.popup_t, .popup_b{height:8px; font-size:0; background: url("/images/popup_tb.png") no-repeat left top; position:relative;}
.popup_b{background-position:left bottom;}
.popup_t .close, .dhtml_window .close, .fpopup .close{position:absolute; top:-8px; right:-13px; width:33px; height:33px; overflow:hidden; text-indent:-9999px; background: url("/images/close.png");}
.popup_m .white {background-color: white; padding:16px 0 0 32px; margin: 0 5px 0 5px;}
.popup h2{color:#0099de; font-size:30px; font-weight:normal; padding-bottom:25px;}
.row{zoom:1;}
.row:after{content:" "; display:block; clear:both;}
.popup .row{padding-bottom:6px;}
.popup .label1{float:left; width:123px; line-height:44px;}
.popup .label1_2{line-height:15px;}
.popup .input{background:#f3f3f0; position:relative; float:left; width:322px; padding:4px; margin-left:-4px;}
.popup .inp_text_wrap{background: url("/images/inp_text_l.png") no-repeat left top; float:left;}
.popup .inp_text{background: url("/images/inp_text_r.png") no-repeat right top; height:14px; padding:11px; width:300px; border:0; float:left;}
.popup .inp_text2{width:160px;}
.popup .forgot{overflow:hidden; text-align:center; line-height:36px;}
.popup .label2{display:block; font-size:11px; color:#8a8a8a; padding-bottom:4px;}
.popup .inp_text3{border:1px solid #d1d1cb; height:15px; padding:6px 10px; width:179px;}
.popup .buttons{height:38px; padding:12px 27px 0; margin:4px 5px 0 -27px;}
.popup .buttons .rbutton{float:right;}
.popup .buttons .cbutton{float:center;}

 

Okay firstly the popup box isnt completely centered vertically, second how can i make it so everything around the box is "grayed out" so the background changes to a transparent gray.

 

 

Any help would be Great!

 

seany123

[seany123]

Okay i have been able to achieve the blackened background effect using the following code: (any suggestions are greatly welcomed)

 

#grayout {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 20;
    visibility: hidden;
    background-color: #000;
    filter: alpha(opacity = 55);
    opacity:.80;
}

 

and just displaying the registration box in front of it, however 1 last thing im having problems with is that when i scroll down the box doesn't follow!

 

can anyone help me with this?

 

so basically i need help with getting the registration_popup completely centered vertically AND when scrolling for the popup to stay centered.