How to load image into bootstrap modal with javascript

Question

My setup is 4 links (below). I want each link to open myModal, but depending on which link gets clicked, a different image file should load in the modal. I got it working for

Answer 1

By using jquery .click you can easily achieve this (with html5 data attribute too).

<ul>
    <li><a href="#myModal" data-toggle="modal" data-img-url="http://placehold.it/200x200/ffffdffffd/ffffff&text=Hey1">6 Teams</a>
    </li>
    <li><a href="#myModal" data-toggle="modal" data-img-url="http://placehold.it/200x200/ffffdffffd/ffffff&text=Hey3">5 Teams</a>
    </li>
    <li><a href="#myModal" data-toggle="modal" data-img-url="http://placehold.it/200x200/ffffdffffd/ffffff&text=Hey4">4 Teams</a>
    </li>
    <li><a href="#myModal" data-toggle="modal" data-img-url="http://placehold.it/200x200/ffffdffffd/ffffff&text=Hey5">3 Teams</a>
    </li>
</ul>

Script:

$('li a').click(function (e) {
    $('#myModal img').attr('src', $(this).attr('data-img-url'));
});

Fiddle: http://jsfiddle.net/vLSWH/292/

Note: Though you did not specify using jQuery, twitter-bootstrap modal require you to use jQuery anyway, so might as well use it.