在Javascript中打开各种按钮的相应弹出窗口

我的HTML文件有许多图标图像（所有图像都具有相同的class属性）和表示模式/弹出窗口的相同数量的HTML片段（它们也具有相同的类名）。图标和弹出代码段总是成对出现，并且是动态生成的，这意味着确切的成对数量是未知的。我的HTML代码如下所示-

<img src="/images/info_icon.gif" class="tooltip_icon" alt="sample">
<div class="tooltip_modal">
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h5>Tooltip</h5>
    </div>
    <div class="modal-body">
      <p>Sample text 1</p>
    </div>
  </div>
</div>

<img src="/images/info_icon.gif" class="tooltip_icon" alt="sample">
<div class="tooltip_modal">
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h5>Tooltip</h5>
    </div>
    <div class="modal-body">
      <p>Sample text 2</p>
    </div>
  </div>
</div>

<img src="/images/info_icon.gif" class="tooltip_icon" alt="sample">
<div class="tooltip_modal">
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h5>Tooltip</h5>
    </div>
    <div class="modal-body">
      <p>Some text 3</p>
    </div>
  </div>
</div>

&时代；
工具提示
示例文本1

&时代；
工具提示
示例文本2

&时代；
工具提示
一些文本3

请注意，每个模式的文本是不同的。 我想在JavaScript中创建一个逻辑，单击图标打开相应的模型。例如，单击第一个图标应显示“示例文本1”，单击第二个图标应显示“示例文本2”

下面是我的JS代码（显然）不起作用：

var btn = document.getElementsByClassName("tooltip_icon");
var modal = document.getElementsByClassName("tooltip_modal");


// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
function displayModal(k) {
    modal[k].style.display = "block";
}

// When the user clicks on <span> (x), close the modal
function hideModal(k) {
    modal[k].style.display = "none";
}

for (var i=0,j=0; i<btn.length,j<modal.length; i++,j++) {

    btn[i].onclick = displayModal(j);
    span.onclick = hideModal(j);
    window.onclick = function(event) {
    if (event.target == modal[j]) {
        hideModal(j);
    }
}
}

var btn=document.getElementsByClassName（“工具提示图标”）；
var modal=document.getElementsByClassName（“工具提示_modal”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
功能显示模式（k）{
模态[k].style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
函数hideModal（k）{
模态[k].style.display=“无”；
}
对于（var i=0，j=0；iOK

您的代码中有几个问题。我重写了整个代码，以便您了解代码中的错误以及解决方案的外观

请记住，我所写的使用了并非所有浏览器都支持的语言功能。但在现代浏览器中，它将运行良好


函数打开窗口（模态）{
modal.style.display='block'；
setTimeout（（）=>{document.addEventListener（'click'，closeModal）；}）；
}
功能关闭窗口（模式）{
modal.style.display='none'；
setTimeout（（）=>{document.removeEventListener（'click'，closeModal）；}）；
}
函数关闭模式（e）{
const modal=getModalRoot（即目标）；
如果（模态）返回；
[].forEach.call（document.querySelectorAll（'.tooltip_modal'），closeWindow）；
}
函数getModalRoot（元素）{
如果（！element | |！element.classList）返回null；
if（element.classList.contains（'modal-content'））返回元素；
返回getModalRoot（element.parentNode）；
}
[].forEach.call（document.querySelectorAll（'.tooltip_图标'），（x，i）=>{
x、 id=`opener${i}`；
const modal=x.querySelector（`${x.id}~.tooltip_modal`）；
x、 addEventListener（'单击'，（）=>{openWindow（模式）；}）；
modal.querySelector（'.close'）.addEventListener（'click'，（）=>{closeWindow（modal）；}）；
})；
/*模式（背景）*/
.工具提示{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
填充顶部：100px；/*框的位置*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.4）；/*黑色w/不透明度*/
}
/*模态内容*/
.模态内容{
位置：相对位置；
背景色：#fefe；
保证金：自动；
填充：0；
边框：1px实心#888；
宽度：80%；
盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
-webkit动画名称：animatetop；
-webkit动画持续时间：0.4s；
动画名称：animatetop；
动画持续时间：0.4s
}
/*添加动画*/
@-webkit关键帧动画顶点{
从{top:-300px；不透明度：0}
到{顶部：0；不透明度：1}
}
@关键帧动画顶点{
从{top:-300px；不透明度：0}
到{顶部：0；不透明度：1}
}
/*关闭按钮*/
.结束{
颜色：白色；
浮动：对；
字号：28px；
字体大小：粗体；
}
.关闭：悬停，
.结束：聚焦{
颜色：#000；
文字装饰：无；
光标：指针；
}
.模态标题{
填充：2x16px；
背景色：#425563；
边框底部：4px实心#ffd100；
颜色：白色；
}
.模态体{填充：10px 16px；}
.模态页脚{
填充：2x16px；
背景色：#5cb85c；
颜色：白色；
}
/*工具提示图标*/
.工具提示图标
{
垫底：4px；
左侧填充：2px；
}

&时代；
工具提示
示例文本一

&时代；
工具提示
示例文本2

&时代；
工具提示
一些文本3

将您尝试过的代码放入JSFIDLE并与我们共享。我的问题已经有到JSFIDLE code.oops的链接。对不起！现在更正URL。