我是JS或HTML的初学者，我需要帮助为不同的图像设置不同的模态内容。例如，当我点击图像1时，模态将弹出显示价格，然后当我点击图像2时，模态将弹出显示数量。这可能吗？
HTML：
<div id="portfoliolist">
<div class="portfolio logo1 mix_all" data-cat="logo" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a data-toggle="modal" data-target=".bs-example-modal-md" href="#" class="b-link-stripe b-animate-go thickbox">
<img src="images/p1.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 "><img src="images/link-ico.png" alt=""/></h2>
</div></a>
</div>
</div>
<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a data-toggle="modal" data-target=".bs-example-modal-md" href="#" class="b-link-stripe b-animate-go thickbox">
<img src="images/p2.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 "><img src="images/link-ico.png" alt=""/></h2>
</div></a>
</div>
</div> <!----start-model-box---->
<a data-toggle="modal" data-target=".bs-example-modal-md" id="type1" href="#"> </a>
<div class="modal fade bs-example-modal-md light-box" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-md">
<div class="modal-content light-box-info">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><img src="images/close.png" title="close" /></button>
<h3>Prices</h3>
<p>Prices</p>
</div>
</div>
</div>