使用Twitter Bootstrap模式

Question

我很快就会在我的网站中使用twitter引导模式。我的网站有引导程序加载和除按钮之外的任何东西都不会触发弹出窗口，我不知道为什么。有人可以帮帮我吗？

这是我的身体标记

<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> 

Answer 1

后的模态正确的您可以试试这个。

$(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> 

Answer 2

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>' 
});