jQuery和CSS位置元素在屏幕中心

Question

標題使聽起來很容易，但我保證它不是。我有一個網站http://sarahnwatson.com。我已經通過點擊關於和聯繫標籤打開了模式窗口。選項卡全部位於左側的無序列表中。 Modal窗口直接編碼在應該打開它的標籤下。

我似乎無法弄清楚的是如何在我的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); 
        }); 
       }); 

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

Answer 1

找到李的窗口的相對位置並翻譯模式：

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



         }); 
        }); 

        }); 

       } 

Answer 2

我不能確切地確定問題的確切位置，但看起來像對中計算是正確的。

我會從編寫正確的代碼開始，而不是試圖在下一個div中創建一個模式，因爲「modal_window」的id將是開始的地方，因爲您不能有多個具有相同名稱的ID ，並且當有兩個具有相同名稱的ID時，試圖在ID上使用jQuery函數可能是個問題。

你做這件事情要比它要複雜得多。在屏幕左側有一個li元素，當您單擊li元素（或者更具體地說是li中的一個區段）時，您希望li元素在屏幕左側進行動畫製作，並同時爲模態進入屏幕。

您應該爲每個模態創建一個帶有唯一標識的div，並且不要將這些模態放置在您嘗試進行動畫製作的li元素的結構中，這也是您嘗試在不同的方向。現在的方式是，你的模態在li元素的內部，這使得一切都變得更難做，因爲按鈕的父母（也是父母的模式）和模態動畫不同，但是模式在父母的按鈕內部。