Hi Everyone!
I am hoping somebody can help me because I'm yanking my hair out. I'm sure the fix is a simple one, but I just can't see it!

I have an overlay modal window that is working perfectly save for one thing. The window that opens appears in the center of the browser window. The "close modal" area I can position inline without a problem, but with the main modal, it seems to only want to position in the center of the browser window, whereas, I'd like to just specify how far from the left edge. It is making me nuts, because otherwise the window works perfectly for me.

For the close div I've got margin left inline. If I try to do it for the modal_window, it is ignored. Thanks a million if anyone can provide any insight..and feel free to laugh that I can't figure it out!

This is the styling

#mask{
position:absolute; /* important */
top:0px; /* start from top */
left:0px; /* start from left */
height:100%; /* cover the whole page */
width:100%; /* cover the whole page */
display:none; /* don't show it '*/

/* styling bellow */
background-color: white;
}

.modal_window{
position:absolute; /* important so we can position it on center later */
display:none; /* don't show it */
z-index:99;
width:900px; height:830px;
/* styling bellow */
color:#000;
background-color:#fff;
margin-left:10px;
}

/* style a specific modal window */
#modal_window{
padding:50px;
border:1px solid gray;
background: #246493;
color:black;
}


and this is the code

$(document).ready(function(){

//get the height and width of the page
var window_width = $(window).width();
var window_height = $(window).height();

//vertical and horizontal centering of modal window(s)
/*we will use each function so if we have more then 1
modal window we center them all*/
$('.modal_window').each(function(){

//get the height and width of the modal
var modal_height = $(this).outerHeight();
var modal_width = $(this).outerWidth();

//calculate top and left offset needed for centering
var top = (window_height-modal_height)/1.3;
var left = (window_width-modal_width)/3;

//apply new top and left css values
$(this).css({'top' : top , 'left' : left});

});

$('.activate_modal').click(function(){

//get the id of the modal window stored in the name of the activating element
var modal_id = $(this).attr('name');

//use the function to show it
show_modal(modal_id);

});

$('.close_modal').click(function(){

//use the function to close it
close_modal();

});

});

//THE FUNCTIONS

function close_modal(){

//hide the mask
$('#mask').fadeOut(500);

//hide modal window(s)
$('.modal_window').fadeOut(500);

}
function show_modal(modal_id){

//set display to block and opacity to 0 so we can use fadeTo
$('#mask').css({ 'display' : 'block', opacity : 0});

//fade in the mask to opacity 0.8
$('#mask').fadeTo(500,0.8);

//show the modal window
$('#'+modal_id).fadeIn(500);

}