How to launch modal from bootstrap carousel image? - ruby-on-rails

Question

I'm trying to launch a modal from a carousel image. I've found a few relevant threads but none that suggest code that has worked for me. Below is the carousel code but I was wondering how I would implement the modal code in relation to it..? Any help would be greatly appreciated!
<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"><img src="<%= asset_path( 'OilBarrons.jpg' ) %>" alt="Oil Barrons" style="max-width:100%;" /></div>
<div class="span3"><img src="<%= asset_path( 'OilBarrons.jpg' ) %>" alt="Oil Barrons" style="max-width:100%;" /></div>
<div class="span3"><img src="<%= asset_path( 'OilBarrons.jpg' ) %>" alt="Oil Barrons" style="max-width:100%;" /></div>
<div class="span3"><img src="<%= asset_path( 'OilBarrons.jpg' ) %>" alt="Oil Barrons" style="max-width:100%;" /></div>
</div><!--/row-fluid-->
</div><!--/item-->
<div class="item">
<div class="row-fluid">
<div class="span3"><img src="<%= asset_path( 'OilBarrons.jpg' ) %>" alt="Oil Barrons" style="max-width:100%;" /></div>
<div class="span3"><img src="<%= asset_path( 'OilBarrons.jpg' ) %>" alt="Oil Barrons" style="max-width:100%;" /></div>
<div class="span3"><img src="<%= asset_path( 'OilBarrons.jpg' ) %>" alt="Oil Barrons" style="max-width:100%;" /></div>
<div class="span3"><img src="<%= asset_path( 'OilBarrons.jpg' ) %>" alt="Oil Barrons" style="max-width:100%;" /></div>
</div><!--/row-fluid-->
</div><!--/item-->
<div class="item">
<div class="row-fluid">
<div class="span3"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></div>
<div class="span3"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></div>
<div class="span3"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></div>
<div class="span3"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></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

First, you should add the modal "code" to your page (you can place it at the end of the page):
<!-- 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>
Then, you must "connect" the image-links of the carousel to the modal:
A correct link is something like this:
Launch demo modal
In your case, something like this:
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" />
Remember to match the href of the anchor to the id of the modal.
You can see more options at this link: http://twitter.github.io/bootstrap/javascript.html#modals
A final things, is better to load the following scripts in the head and not in the body:
<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>