2015-04-01 59 views
1

我很快就會在我的網站中使用twitter引導模式。我的網站有引導程序加載和除按鈕之外的任何東西都不會觸發彈出窗口,我不知道爲什麼。有人可以幫幫我嗎?使用Twitter Bootstrap模式

這是我的身體標記

<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-label="Close"><span aria-hidden="true">&times;</span></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> 

回答

0

後的模態正確的您可以試試這個。

$(document).ready(function() { 
    $("#btnshow").on('click', function(event) { 

    $('#myModal').modal('show'); 
    $('#myModal').on('shown', function() { 
     // do more here 
    }) 

    }); 

}); 

調用您模式窗口

<button id="btnshow">Show</button> 
<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-label="Close"><span aria-hidden="true">&times;</span></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> 
0

Bootbox.js樣本按鈕是一個小型的JavaScript庫,它允許你創建使用引導程序模態對話框,而不必擔心創建,管理或刪除任何所需的DOM元素或JS事件處理程序。這裏有一個最簡單的例子:

http://bootboxjs.com/examples.html

bootbox.dialog({ 
title: "That html", 
message: '<img src="images/bootstrap_logo.png" width="100px"/><br/> You can also use <b>html</b>' 
});