在屏幕中心的引導模式

我一直試圖在我的網站上使用引導程序3顯示一個模式。下面的代碼是從引導站點複製並工作。在屏幕中心的引導模式

當模式顯示它顯示在屏幕的頂部時 - 是否可以在中心顯示它？

<div id="modal" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
      </div> 
      <div class="modal-body"> 
       ... 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary">Save changes</button> 
      </div> 
     </div> 
    </div> 
</div>

感謝

來源

2014-02-11 developer82

[此主題] [1]是否回答你的問題？ [1]：http://stackoverflow.com/questions/18422223/bootstrap-3-modal-vertical-position-center – Grmpfhmbl

是，眼前這個類添加到你的CSS：

.modal-dialog { 
    margin-right: 0; 
    margin-top: your desired value ; 
}

希望這將幫助你

來源

2014-02-11 06:39:22

理想的情況下它應該，但如果有任何問題，你可以使用這個我猜測模態的內容是動態的，所以可以寫這個。

var h = ($('.modal').height())/2; 
$('.modal').css({'top':'50%','margin-top':'-'+h+'px'});

來源

2014-02-11 07:01:44 Alex

#modal { 
    margin: 0 auto; 
}

之一來呈現一個模態的最佳方式是創建包含整個模態碼（如在問題示出）內部具有單獨的部分文件，然後數據肘節到該div的id照常。

默認情況下，你的模態應該出現在頁面佈局的中心。但如果它不，那麼我上面給出的代碼應該做的伎倆。

如果仍然不是這意味着您的div類會在某處被覆蓋。 DO 在您的模態上檢查元素（右鍵單擊+檢查元素），並檢查哪些CSS類與您的模態位置相沖突。

從外部文件加載一個頁面，你問：

1）首先創建一個外部文件/部分包含所有模式的代碼，並保存爲_terms_and_conditions.html.erb（注： ID是很重要的）

<div class="modal fade" id="e-terms" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div>

2）現在請你只是一個鏈接的點擊創建外部文件，這樣

<a data-target="#e-terms" data-toggle="modal" type="button">Terms and conditions</a>

我們只是將這段模態代碼粘貼到不同的文件中，然後調用整個文件本身。這就是它！創建文件的方式可能取決於您使用的語言（因爲您沒有在任何地方提及它）。但重要的一點是定位模式代碼的ID是否寫入相同的文件或不同的文件。

來源

2014-02-11 08:04:09

嗨，嘗試添加你建議的保證金 - 不起作用。你如何從外部文件加載整個HTML？你能舉一個例子嗎？謝謝 – developer82

當然，我已經給出了一個頂部的例子，但對於你的問題嘗試檢查你的模態元素，並檢查是否有其他類衝突。它是找出問題的最簡單方法。 –

在屏幕中心的引導模式

回答

相關問題