Twitter Bootstrap模式窗口在滾動時不會停留在屏幕中央

新手使用Twitter Bootstrap和CSS，但通常不能編程。對於一個讓我無法尋找解決方案的問題感到好奇。我目前正在打開一個模態窗口來收集用戶的一些數據。該頁面通過滾動條延伸到屏幕底部。Twitter Bootstrap模式窗口在滾動時不會停留在屏幕中央

模態打開在頁面的中心，而不是視圖屏幕的中心。我使用下面的CSS：

.modal { 
     width: 200px; 
     height: 200px; 
     position:fixed; 
     top: 50%; 
     left: 50%; 
     margin-left: -100px; 
     margin-top: -100px; 
     z-index: 1050; 
     background-color: #ffffff; 
     border: 1px solid #999; 
     border: 1px solid rgba(0, 0, 0, 0.3); 
     *border: 1px solid #999; 
     -webkit-border-radius: 6px; 
     -moz-border-radius: 6px; 
     border-radius: 6px; 
     outline: none; 
     -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
     -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
     box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
     -webkit-background-clip: padding-box; 
     -moz-background-clip: padding-box; 
     background-clip: padding-box; 
    }

和HTML如下：

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" 
aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal"  
aria-hidden="true">×</button> 
    <h3 id="myModalLabel">Modal header</h3> 
    </div> 
    <div class="modal-body"> 
    <p>One fine body…</p> 
    </div> 
    <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    <button class="btn btn-primary">Save changes</button> 
    </div> 
</div>

誰能幫助我嗎？

來源

2013-01-15 Mr Ranger

爲了讓窗口顯示在屏幕中央，您需要使用Javascript，確定屏幕中心相對於文檔的位置，並將模式窗口定位爲「position：fixed;」。我會建議使用簡單的JQuery，這裏是一些示例代碼。

function showModal(){ 
    var $modal = $(".modal"); 
    var winH = $(window).height(); 
    var winW = $(window).width(); 

    $modal.css({ 
    position:"fixed", 
    left: ((winW - $modal.outerWidth())/2 + $(document).scrollLeft()), 
    top: ((winH - $modal.outerHeight())/2 + $(document).scrollTop()) 
    }).show(); 
}

來源

2013-01-15 16:00:11