我是新手/初学者，我正在尝试创建一个包含图像的html页面，当您点击它们时，会弹出一个文本框并提供信息。该文本大约150 - 200个单词，我希望弹出框能够响应。
经过大量时间花在这上面之后，我找到的最佳解决方案（在我的初学者级别）是使用带滚动条的模态框（由于要读取的文本量）。我使用过这段代码/指南： http://www.w3schools.com/howto/howto_css_modals.asp
我修改了代码中的第8行，从绝对到相对，因为当我使用代码并为自己尝试时，原始版本不允许滚动条滚动到底部以完全读取文本。
.modal {
display: none; /* Hidden by default */
position: relative; /* Stay in place */
我在这里上传了一个版本，略有修改。
http://sugastore.com/test/modal-textbox.html
但是，我想在同一个html页面上有多个模态文本框，我不知道该怎么做。我一直在网上阅读有关编号div ID的信息，但这些信息太先进了，我无法理解。
我的问题是：
Q1。如何使用此模式代码在一个页面上创建多个模态框？ （并让他们做出回应）
此外，但不是那么重要（我相信我可以找到一种在线阅读方式，但也会在这里提问）。
Q2。如何更改按钮到图像的链接，以便点击图像并弹出模式框？
Q3。当我将模态从绝对更改为相对（如上所述）时，半透明黑色背景不适合整个页面，是否有一个简单的修复方法来修改它？
我也欢迎任何已经有一个脚本/代码示例的人弹出一个简单的响应式多模态文本框（点击一个图像时），该文本框是响应式的，并且允许滚动来计算大量文本。
答案 0 :(得分：0)
试试这个：
Q1：您可以使用代码创建多个模态，但您必须为它们提供不同的ID。例如#myModal，＃myModal1，＃myModal2或更好仍然根据它们显示的内容命名它们。它们应该具有响应性，因为bootstrap模式设计为响应式
Q2：用图片标签替换按钮标签，并为其指定ID“myBtn”。单击图像应触发模态
问题3：将相对值更改为固定值。这应该可以解决问题。
答案 1 :(得分：0)
为了回答我自己的问题，我最终废弃了原来的代码和我工作的来源，因为我无法让它工作，而是我发现并使用了一个例子： http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-modals.php
我修改了div ID，就像之前建议的那样，出于某种原因，改变div ID在这个模态上工作，不像我使用的原始代码。 这是一个我想要实现的例子的链接（我自己的修正案）：