Question

42

How to load image into bootstrap modal with javascript

rated 0 times [ 49] [ 7] / answers: 1 / hits: 38948 / 11 Years ago, thu, september 12, 2013, 12:00:00

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 one of the links.

<li><a href=#myModal data-toggle=modal>6 Teams</a></li>

<li><a href=#>5 Teams</a></li>

<li><a href=#>4 Teams</a></li>

<li><a href=#>3 Teams</a></li>



<!-- Modal -->

<div id=myModal class=modal hide fade tabindex=-1 role=dialog aria-labelledby=myModalLabel aria-hidden=true style=width:800px;>

<div class=modal-header>

<button type=button class=close data-dismiss=modal aria-hidden=true>×</button>

</div>

<div class=modal-body>

<img src=/images/brackets/6teamDouble1.jpg>

</div>

<div class=modal-footer>

<button class=btn data-dismiss=modal aria-hidden=true>Close</button>

</div>

</div>

How do I get this to work for each link without building a separate modal for each one?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

davism

Add To Favorites

Follow

Total Points: 339

Total Questions: 100

Total Answers: 100

Location: Sweden

Member since Fri, Apr 16, 2021

3 Years ago

answered 11 Years ago frederickmohamedw · Accepted Answer

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/dddddd/ffffff&text=Hey1>6 Teams</a>

    </li>

    <li><a href=#myModal data-toggle=modal data-img-url=http://placehold.it/200x200/dddddd/ffffff&text=Hey3>5 Teams</a>

    </li>

    <li><a href=#myModal data-toggle=modal data-img-url=http://placehold.it/200x200/dddddd/ffffff&text=Hey4>4 Teams</a>

    </li>

    <li><a href=#myModal data-toggle=modal data-img-url=http://placehold.it/200x200/dddddd/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.