2011-12-23 229 views
3

我有一個簡單的按鈕,使用引導程序的模式,這就像一個彈出div。我無法讓它工作。當我點擊按鈕時,沒有任何反應。我使用Firefox。我可能忘記了一些簡單的事情,但我找不到問題。引導模式不工作

 <!DOCTYPE html> 
     <html> 
      <head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script type='text/javascript' src='http://twitter.github.com/bootstrap/1.4.0/bootstrap-modal.js'></script> 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css"> 

    </head> 
    <body> 

     <a class="btn" data-controls-modal="my-modal" data-backdrop="static" id='mod'>Launch Modal</a> 

    </body> 
    </html> 

回答

4
<div class="modal-backdrop fade in" ></div> 
    <div class="modal hide fade in" id="my-modal" style="display: none;"> 
    <div class="modal-header"> 
     <a class="close" href="#">×</a> 
     <h3>Modal Heading</h3> 
    </div> 
    <div class="modal-body"> 
     <p>One fine body…</p> 
    </div> 
    <div class="modal-footer"> 
     <a class="btn primary" href="#">Primary</a> 
     <a class="btn secondary" href="#">Secondary</a> 
    </div> 

你必須把這個代碼在你的頁面主體是彈出(模式)的HTML代碼。 用於此代碼的較少文件是patterns.less。和我的模式是彈出的ID

希望這適用於你。

+1

我覺得你不需要div類的模態背景。它顯示模式時通過引導JavaScript添加。 – 2012-05-31 09:10:51

+0

是否有可能擴展此答案以顯示主要和次要按鈕如何連接起來以實際執行某些操作。說,小學應打開頁面'foo.html'和中學應打開頁面'bar.html' – 2012-06-25 22:10:32

+0

我不是專家,但我認爲我們可以使用href鏈接'foo.html'或任何resp文件或也可以使用JavaScript或jQuery的功能來獲得這項工作。 – 2012-07-04 09:56:24

6

另外,請確保您包含css規則來設計背景元素的風格。例如:

.modal-backdrop { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 1040; 
    background-color: #000000; 
} 

.modal-backdrop.fade { 
    opacity: 0; 
} 

.modal-backdrop, .modal-backdrop.fade.in { 
    opacity: 0.8; 
    filter: alpha(opacity=80); 
}