javascript - 如何使用 javascript 编写小图像弹出窗口？

Question

我的网站上有一个产品页面，共有 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>

Answer 1

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

尽管我支持 Shailesh Singh 的引导模型想法。

这种方式不需要使用 Bootstrap ，使它更容易一步。