Bootstrap 3.0 Modal

Question

我被卡住了。鑑於Bootstrap 3.0即將發佈，我決定爲它開發一個新項目。事情目前進展順利，但對於我的生活，我無法弄清楚如何在Bootstrap 3.0中做Modal對話框。

有沒有人有一個簡單的例子？

Answer 1

你可以嘗試建立文檔：Compile Twitter bootstrap 3 docs (How to)?所以也http://bassjobsen.weblogs.fm/explore-and-install-twitter-bootstrap-3/從文檔：

<!-- Button trigger modal --> 
    <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a> 

    <!-- Modal --> 
    <div 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">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><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
    </div><!-- /.modal --> 

Answer 2

我一直在對抗同樣的問題，由於這次談話，我發現我錯了。當使用TwitterBootstrap3，你需要以下東西：

A鍵觸發

<a data-toggle="modal" 
    href="#myModal" 
    class="btn btn-primary btn-lg" 
>Launch demo modal</a> 

的這種minimun結構的DIV：

<div class="modal fade" 
    id="myModal" 
    tabindex="-1" 
    role="dialog" 
    aria-labelledby="myModalLabel" 
    aria-hidden="true" 
> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <!-- blah blah content here --> 
     </div> 
    </div> 
</div> 

知道這是很重要的，如果你不不放置模式對話框和模型內容，模式窗口不會正常打開

Answer 3

我發現了一個非常很好的例子，以及讓你下載一個包含所有關於Booststrap 3 Modal的代碼示例的zip。

• Bootstrap 3 Modal explanation
• Download Bootstrap 3 Modal demo

我希望這可以幫助您的！