display different content using bootstrap modals -

i want make content different categorized photo, when click 1 of category ,it pop modal(which i'm using bootstrap) contain pictures category.for example: have 2 category, male , female. when click male category, pop modal male photo only. source code:

<div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="mymodallabel">     <div class="modal-dialog" role="document">         <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>             </div>             <div class="modal-body">                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">                     <!-- indicators -->                     <ol class="carousel-indicators">                         <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>                         <li data-target="#carousel-example-generic" data-slide-to="1"></li>                         <li data-target="#carousel-example-generic" data-slide-to="2"></li>                     </ol>                      <!-- wrapper slides -->                     <div class="carousel-inner" role="listbox">                         <div class="item active">                             <img src="..." alt="...">                             <div class="carousel-caption">                              </div>                         </div>                         <div class="item">                             <img src="..." alt="...">                             <div class="carousel-caption">                             ...                             </div>                         </div>                      </div>                      <!-- controls -->                     <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">                         <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>                         <span class="sr-only">previous</span>                       </a>                     <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">                         <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>                         <span class="sr-only">next</span>                     </a>                 </div>              </div>         </div>     </div> </div>