css - 单个 html 页面上的简单多模式文本框

Question

我是新手/初学者，我正在尝试创建一个包含图像的 html 页面，当您单击它们时，会弹出一个文本框并提供信息。文本大约有 150 - 200 个字，我希望弹出框能够响应。

在这上面花了很多时间之后，我找到的最佳解决方案(在我的初学者级别)是使用带有滚动条的模式框(由于要阅读的文本量)。我使用过此代码/指南: http://www.w3schools.com/howto/howto_css_modals.asp

并且我将代码中的第8行从absolute修改为relative，因为在我自己使用代码的时候，原版不允许滚动条滚动到底部来完整阅读文本。

.modal {
display: none; /* Hidden by default */
position: relative; /* Stay in place */

我在这里上传了一个略有修改的版本。

http://sugastore.com/test/modal-textbox.html

但是，我想在同一个 html 页面上有多个模态文本框，但我不知道该怎么做。我一直在网上阅读有关编号的 div ID 的信息，但这些信息太高级了，我无法理解。

我的问题是:

Q1. 如何使用此模态代码在一个页面上创建多个模态框？ (并让他们做出回应)

还有，但不是那么重要(我相信我可以通过在线阅读找到一种方法，但也会在这里提问)。

Q2.如何将链接从按钮更改为图片，以便您点击图片并弹出模态框？

问题 3. 当我将模态从绝对模式更改为相对模式时(如上所述)，半透明黑色背景不适合整个页面，是否有简单的修复方法来修正此问题？

我也欢迎任何已经拥有简单的响应式多模式文本框弹出脚本/代码示例(单击图像时)的人，该文本框具有响应性并允许滚动以显示大量文本。

Answer 1

试试这个:

问题 1:您可以使用代码创建多个模态框，但必须为它们提供不同的 ID。例如#myModal、#myModal1、#myModal2 或更好的方法仍然是根据它们显示的内容来命名它们。它们应该是响应式的，因为引导模式被设计为响应式

问题 2:将按钮标签替换为图像标签并为其指定 ID“myBtn”。单击图像应触发模态

Q3:将相对改为固定。这应该可以解决问题。