Различные модальные материалы для разных изображений

Question

Я новичок в JS или HTML, и мне нужна помощь в настройке различных модальных материалов для разных изображений. Например, когда я щелкнул image1, модальное будет всплывать, показывая цену, а затем, когда я щелкнул изображение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> 

Answer 1

Укажите data-target атрибут.

См. this.