如何從引導傳送帶圖像啓動模態？

Question

我試圖從一個輪播圖像啓動一個模式。我找到了一些相關的線程，但都沒有提示代碼對我有用。下面是輪播代碼，但我想知道如何實現與它有關的模態代碼..？任何幫助將不勝感激！

<div id="well"> 
<div id="myCarousel" class="carousel slide"> 

<!-- Carousel items --> 
<div class="carousel-inner"> 

<div class="item active"> 
    <div class="row-fluid"> 
     <div class="span3"><a href="OilBarrons" class="thumbnail"><img src="<%= asset_path('OilBarrons.jpg') %>" alt="Oil Barrons" style="max-width:100%;" /></a></div> 
     <div class="span3"><a href="OilBarrons" class="thumbnail"><img src="<%= asset_path('OilBarrons.jpg') %>" alt="Oil Barrons" style="max-width:100%;" /></a></div> 
     <div class="span3"><a href="OilBarrons" class="thumbnail"><img src="<%= asset_path('OilBarrons.jpg') %>" alt="Oil Barrons" style="max-width:100%;" /></a></div> 
     <div class="span3"><a href="OilBarrons" class="thumbnail"><img src="<%= asset_path('OilBarrons.jpg') %>" alt="Oil Barrons" style="max-width:100%;" /></a></div> 
    </div><!--/row-fluid--> 
</div><!--/item--> 

<div class="item"> 
    <div class="row-fluid"> 
     <div class="span3"><a href="OilBarrons" class="thumbnail"><img src="<%= asset_path('OilBarrons.jpg') %>" alt="Oil Barrons" style="max-width:100%;" /></a></div> 
     <div class="span3"><a href="OilBarrons" class="thumbnail"><img src="<%= asset_path('OilBarrons.jpg') %>" alt="Oil Barrons" style="max-width:100%;" /></a></div> 
     <div class="span3"><a href="OilBarrons" class="thumbnail"><img src="<%= asset_path('OilBarrons.jpg') %>" alt="Oil Barrons" style="max-width:100%;" /></a></div> 
     <div class="span3"><a href="OilBarrons" class="thumbnail"><img src="<%= asset_path('OilBarrons.jpg') %>" alt="Oil Barrons" style="max-width:100%;" /></a></div> 
    </div><!--/row-fluid--> 
</div><!--/item--> 

<div class="item"> 
    <div class="row-fluid"> 
     <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div> 
     <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div> 
     <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div> 
     <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div> 
    </div><!--/row-fluid--> 
</div><!--/item--> 

</div><!--/carousel-inner--> 

<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> 
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> 
</div><!--/myCarousel--> 

</div><!--/well--> 

<!-- Call jQuery 1.9, call bootstrap.js and run the carousel when the DOM is ready. Slide every 10 seconds. --> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<script src="assets/js/bootstrap-modal.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#myCarousel').carousel({ 
     interval: 10000 
     }) 
    }); 
</script> 

Answer 1

首先，你應該模態「代碼」添加到你的頁面（您可以在頁面的末尾放置）：

<!-- Modal --> 
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 id="myModalLabel">Modal header</h3> 
    </div> 
    <div class="modal-body"> 
    <p>One fine body…</p> 
    </div> 
    <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    <button class="btn btn-primary">Save changes</button> 
    </div> 
</div> 

然後，你必須「連接」的圖像 - 旋轉木馬的鏈接模態：

正確的鏈接是這樣的：

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

在你的情況，東西像這樣：

<a href="#myModal" role="button" data-toggle="modal"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a> 

請記住匹配錨點的href與模式的id。

您可以通過以下鏈接查看更多選項：http://twitter.github.io/bootstrap/javascript.html#modals

最後的事情，是更好地加載以下腳本的頭部，而不是在身體：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<script src="assets/js/bootstrap-modal.js"></script>