如何使用Java脚本编写小图像弹出窗口？

Question

I have a product page in my website and there are 12 products and each product have a unique photo and description table. and I need a small popup model to show the description table when an user click the product photo. how can i do the task? this is my product page's code

 <!--1-->
<div class="thumbnail">
<div class="image">
<p>
<img style="width: 100%; border-radius: 60px 20px 60px 20px; 
    overflow: hidden; border: 7px solid #3366ff;"  src="http://steelrich.com/SR/wp-content/uploads/2016/11/deformed_steel_bar_for_construction_8537_1.jpg" />

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,</p>
</div></div>

<!--2-->
<div class="thumbnail">
<div class="image">
<p>
<img style="width: 100%; border-radius: 60px 20px 60px 20px; 
    overflow: hidden; border: 7px solid #3366ff;"  src="http://steelrich.com/SR/wp-content/uploads/2016/11/deformed_steel_bar_for_construction_8537_1.jpg" />

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,</p>
</div></div>

<!--3-->
<div class="thumbnail">
<div class="image">
<p>
<img style="width: 100%; border-radius: 60px 20px 60px 20px; 
    overflow: hidden; border: 7px solid #3366ff;"  src="http://steelrich.com/SR/wp-content/uploads/2016/11/deformed_steel_bar_for_construction_8537_1.jpg" />

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,</p>
</div></div>


<!--4-->
<div class="thumbnail">
<div class="image">
<p>
<img style="width: 100%; border-radius: 60px 20px 60px 20px; 
    overflow: hidden; border: 7px solid #3366ff;"  src="http://steelrich.com/SR/wp-content/uploads/2016/11/deformed_steel_bar_for_construction_8537_1.jpg" />

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,</p>
</div></div>

<!--5-->
<div class="thumbnail">
<div class="image">
<p>
<img style="width: 100%; border-radius: 60px 20px 60px 20px; 
    overflow: hidden; border: 7px solid #3366ff;"  src="http://steelrich.com/SR/wp-content/uploads/2016/11/deformed_steel_bar_for_construction_8537_1.jpg" />

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,</p>
</div></div>

<!--6-->
<div class="thumbnail">
<div class="image">
<p>
<img style="width: 100%; border-radius: 60px 20px 60px 20px; 
    overflow: hidden; border: 7px solid #3366ff;"  src="http://steelrich.com/SR/wp-content/uploads/2016/11/deformed_steel_bar_for_construction_8537_1.jpg" />

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,</p>
</div></div>

<!--7-->
<div class="thumbnail">
<div class="image">
<p>
<img style="width: 100%; border-radius: 60px 20px 60px 20px; 
    overflow: hidden; border: 7px solid #3366ff;"  src="http://steelrich.com/SR/wp-content/uploads/2016/11/deformed_steel_bar_for_construction_8537_1.jpg" />

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,</p>
</div></div>

<!--8-->
<div class="thumbnail">
<div class="image">
<p>
<img style="width: 100%; border-radius: 60px 20px 60px 20px; 
    overflow: hidden; border: 7px solid #3366ff;"  src="http://steelrich.com/SR/wp-content/uploads/2016/11/deformed_steel_bar_for_construction_8537_1.jpg" />

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,</p>
</div></div>

<!--9-->
<div class="thumbnail">
<div class="image">
<p>
<img style="width: 100%; border-radius: 60px 20px 60px 20px; 
    overflow: hidden; border: 7px solid #3366ff;"  src="http://steelrich.com/SR/wp-content/uploads/2016/11/deformed_steel_bar_for_construction_8537_1.jpg" />

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,</p>
</div></div>

<!--10-->
<div class="thumbnail">
<div class="image">
<p>
<img style="width: 100%; border-radius: 60px 20px 60px 20px; 
    overflow: hidden; border: 7px solid #3366ff;"  src="http://steelrich.com/SR/wp-content/uploads/2016/11/deformed_steel_bar_for_construction_8537_1.jpg" />

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,</p>
</div></div>

<!--11-->
<div class="thumbnail">
<div class="image">
<p>
<img style="width: 100%; border-radius: 60px 20px 60px 20px; 
    overflow: hidden; border: 7px solid #3366ff;"  src="http://steelrich.com/SR/wp-content/uploads/2016/11/deformed_steel_bar_for_construction_8537_1.jpg" />

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,</p>
</div></div>

<!--12-->
<div class="thumbnail">
<div class="image">
<p>
<img style="width: 100%; border-radius: 60px 20px 60px 20px; 
    overflow: hidden; border: 7px solid #3366ff;"  src="http://steelrich.com/SR/wp-content/uploads/2016/11/deformed_steel_bar_for_construction_8537_1.jpg" />

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,</p>
</div></div></div>

Answer 1

http://www.w3schools.com/howto/howto_css_modals.asp

Although I second Shailesh Singh's bootstrap model idea.

This way doesn't require use of bootstrap, making it one full step easier.

Answer 2

A concept: Create a div (your popup) with dispay hidden and give each photo an unique id or attribute. Add an on click event listener on the photo div classes. When clicking a photo, get the clicked attribute or Id and change the content of your hidden popup div to your description table. Then set the display of the popup to block.