我的网站上有一个产品页面，共有12个产品，每个产品都有一个独特的照片和说明表。当用户点击产品照片时，我需要一个小的弹出模型来显示描述表。我该怎么办？这是我的产品页面代码
<!--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>
答案 0 :(得分：1)
http://www.w3schools.com/howto/howto_css_modals.asp
虽然我是第二个Shailesh Singh的引导模型想法。
这种方式不需要使用引导程序，使其更容易一步。
答案 1 :(得分：0)
一个概念：创建一个隐藏了dispay的div（你的弹出窗口），并为每张照片提供一个唯一的id或属性。在照片div类上添加一个on click事件监听器。单击照片时，获取单击的属性或Id，并将隐藏的弹出div的内容更改为描述表。然后将弹出窗口的显示设置为阻止。