Question

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)
                        .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>

Answer 1

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 });



                        });
                    });

                    });

                }