Javascript jQuery和CSS在屏幕中央定位元素

标题听起来很简单，但我保证不是。我有一个网站在。我有一个模式窗口，我可以通过单击“关于”和“联系”选项卡打开它。这些选项卡都位于左侧的无序列表中。模态窗口直接编码在应该打开它的选项卡下面

我似乎不知道如何在jQuery代码和CSS代码之间，将不同大小的模式窗口定位在屏幕中央。因为它们位于左侧的元素中，所以它们会尝试留在该元素中

以下是选项卡和模式窗口的CSS：

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

下面是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);
                    });
                });

//创建一个模式窗口
函数createModal（elm）{
var$this=$（this）；
变量$body=$（'body'）；
var winHeight=$（window.height（）；
var winWidth=$（window.width（）；
$body.prepend（“”）；
$（“#断电”）.fadeIn（1000，函数（）{
$（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）；
});
});

HTML结构如下所示：

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

关于
姓名：莎拉·沃森
年龄:16
类型：民间音乐、流行音乐、另类音乐
生物：

我今年16岁，是一名有抱负的歌手/词曲作者。我住在北加州。我的人生目标和抱负是有朝一日在收音机里播放一首流行歌曲，不管是我在唱还是别人在唱。我喜欢听任何类型的音乐，学习新的东西总是很有趣的！


接触
接触
名称：



电子邮件：



原因:
表扬预订

消息：

找到li与窗口的相对位置并转换模式：

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



                        });
                    });

                    });

                }

$this.closest（'li'）.animate（{left:'0px}，function（）{
var parentLiModalPos=$（this.position（）；
var$elem=$this.parent（）.next（'div#modal_window'）；
createModal（$elem，parentLiModalPos.top）；
});
函数createModal（elm，parentLiTop）{
var$this=$（this）；
变量$body=$（'body'）；
var winHeight=$（window.height（）；
var winWidth=$（window.width（）；
$body.prepend（“”）；
$（“#断电”）.fadeIn（1000，函数（）{
$（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}）；
});
});
});
}

我真的无法准确指出问题所在，但看起来对中的计算是正确的

我将从编写适当的代码开始，而不是尝试在下一个div中创建一个modal，该div的id为“modal_window”将是开始的地方，因为您不能有多个相同名称的id，并且当有两个相同名称的id时，尝试在id上使用jQuery函数可能是有问题的

你让事情变得比实际情况复杂得多。在屏幕左侧有一个li元素，当您单击该li元素（或者更具体地说是li中的跨度）时，您希望该li元素在屏幕左侧设置动画，同时在屏幕中设置模态动画

---

您应该为每个模态创建一个具有uniqe id的div，而不是将这些模态放置在您尝试设置动画的li元素的结构中，li元素也是您尝试以不同方向设置动画的模态的父级。现在的情况是，你的模态在li元素中，这使得一切都变得更加困难，因为按钮父级（以及模态父级）和模态的动画不同，但模态在按钮父级中。

将其全部放入JSFIDLE演示中