jQuery and CSS position element in center of screen

The title makes it sound easy, but I guarantee it's not. I have a site at http://sarahnwatson.com. I have modal windows that I have gotten to open by clicking on the tabs About and Contact. The tabs are all in an unordered list that is positioned to the left. The Modal window is coded in directly under the tab that is supposed to open it.

What I can't seem to figure out is how to, between my jQuery code and my CSS code, position the different sized modal windows in the center of the screen. Because they are within an element that is positioned to the left, they try to stay in that element.

Here is the CSS for the tabs and the modal window:

ul.st_navigation{
    position:relative;
    width:100%;
    top:140px;
    left:-300px;
    list-style:none;
}
ul.st_navigation li {
    float:left;
    clear:both;
    margin-bottom:8px;
    position:relative;
    width:100%;
}
ul.st_navigation li span.st_link{
    background: rgba(0,0,0,.8);
    float:left;
    position:relative;
    line-height:50px;
    padding:0px 20px;
    -moz-box-shadow:0px 0px 2px #000;
    -webkit-box-shadow:0px 0px 2px #000;
    box-shadow:0px 0px 2px #000;
}
ul.st_navigation li span.st_arrow_down,
ul.st_navigation li span.st_arrow_up{
    position:absolute;
    margin-left:20px;
    width:40px;
    height:50px;
    cursor:pointer;
    -moz-box-shadow:0px 0px 2px #000;
    -webkit-box-shadow:0px 0px 2px #000;
    box-shadow:0px 0px 2px #000;
}
ul.st_navigation li span.st_arrow_down{
    background: rgba(0,0,0,.8) url(../images/icons/down.png) no-repeat center center;
}
ul.st_navigation li span.st_arrow_up{
    background: rgba(0,0,0,.8) url(../images/icons/up.png) no-repeat center center;
}
ul.st_navigation li span.st_modal{
    position:absolute;
    margin-left:20px;
    width:40px;
    height:50px;
    cursor:pointer;
    -moz-box-shadow:0px 0px 2px #000;
    -webkit-box-shadow:0px 0px 2px #000;
    box-shadow:0px 0px 2px #000;
    background: rgba(0,0,0,.8) url(../images/icons/modal.png) no-repeat center center;
}

And here is the jQuery:

// Create a modal window
                function createModal(elm) {
                    var $this = $(this);
                    var $body = $('body');
                    var winHeight = $(window).height();
                    var winWidth = $(window).width();

                    $body.prepend('<div id="blackout">');
                    $("#blackout").fadeIn(1000, function() {

                    $(elm).css({ left: '-9999px', display: 'block' });

                        var modalHeight = $(elm).height();
                        var modalWidth = $(elm).width();

                        var offsetH1 = winHeight/2;
                        var offsetH2 = (winHeight-modalHeight)/2;
                        var offsetW = (winWidth-modalWidth)/2;

                        $(elm)
                   开发者_如何学JAVA     .css({ top:offsetH1, left:offsetW, height:'0px' })
                        .animate({ top:offsetH2, height:modalHeight });



                        });
                    });

                    });

                }

                $list.find('.st_modal').live('click',function(){
                    var $this = $(this);
                    hideThumbs();
                    $this.closest('li').animate({ left: "0px" }, function() {
                        var $elem = $this.parent().next('div#modal_window');
                        createModal($elem);
                    });
                });

The HTML structure is as follows:

<ul id="st_nav" class="st_navigation">
                <li>
                    <span class="st_link">About<span class="st_modal"></span></span>
                    <div id="modal_window"  style="width:600px;">
                    <div class="about">
                        <span class="line"><span class="left">Name: </span>Sarah Watson</span>
                        <span class="line"><span class="left">Age: </span>16</span>
                        <span class="line"><span class="left">Genre: </span>Folk, Pop, Alternative</span>
                        <span class="line"><span class="left">Bio: </span></span><br />
                        I am 16yrs old and an aspiring singer/songwriter. I live in Northern California. My goals and ambitions in life are to someday have a popular song on the radio, whether I am singing it or someone else is. I love to hear just about any kind of music, learning something new is always fun!
                    </div>
                    </div>
                </li>
                <li>
                <span class="st_link">Contact<span class="st_modal"></span></span>
                    <div id="modal_window" style="width: 450px;">
                        <h2>Contact</h2>
                        <form id="contact_form" method="POST" action="#">
                        <label>Name:</label><br />
                        <input type="text" name="name" /><br />
                        <label>Email:</label><br />
                        <input type="text" name="email" /><br />
                        <label>Reason:</label> &nbsp;
                        <label><input type="radio" name="reason" value="praise" checked='checked' /> Praise</label> <label><input type="radio" name="reason" value="booking" /> Booking</label><br />
                        <label>Message:</label><br />
                        <textarea name="name"></textarea><br />
                        <input type="submit" value="Submit" name="submit" /> <span class="status_message"></span>
                        </form>
                    </div>
                </li>
            </ul>

Find the relative position of the li to the window and translate the modal:

 $this.closest('li').animate({ left: "0px" }, function() {
var parentLiModalPos = $(this).position();
                        var $elem = $this.parent().next('div#modal_window');
                        createModal($elem, parentLiModalPos.top);
                    });


function createModal(elm, parentLiTop) {
                    var $this = $(this);
                    var $body = $('body');
                    var winHeight = $(window).height();
                    var winWidth = $(window).width();

                    $body.prepend('<div id="blackout">');
                    $("#blackout").fadeIn(1000, function() {

                    $(elm).css({ left: '-9999px', display: 'block' });

                        var modalHeight = $(elm).height();
                        var modalWidth = $(elm).width();

                        var offsetH1 = winHeight/2;
                        var offsetH2 = (winHeight-modalHeight)/2;
                        var offsetW = (winWidth-modalWidth)/2;

                        $(elm)
                        .css({ top:offsetH1 - parentLiTop, left:offsetW, height:'0px' })
                        .animate({ top:offsetH2, height:modalHeight });



                        });
                    });

                    });

                }

I can't really pinpoint exactly where the problem is, but it looks like the calculations for centering are correct.

I would start by writing proper code, and not trying to create a modal in the next div whith an id of "modal_window" would be the place to start, as you can NOT have more than one ID with the same name, and trying to use jQuery functions on the ID could be problamatic when there are two ID's with the same name.

Your making this a lot more complicated than it has to be. You have a li element on the left side on your screen, when you click that li element (or more specifically a span within the li) you want the li element to animate to the left off the screen, and at the same time animate a modal into the screen.

You should create a div with a uniqe id for each modal, and NOT PLACE those modals inside the structure for the li element you are trying to animate, that is also the parent of the modal you are trying to animate in a different direction. The way it is now, your modals are inside the li elements, and this makes everything a lot harder to do as the buttons parent (and also the modals parent) and the modal animates differently but the modal is inside the buttons parent.