Javascript 如何在python中创建弹出窗口？

我想知道当我点击按钮时如何创建弹出窗口

我使用python编写代码，并循环我需要的数据。数据出来后，我创建了一个按钮按下，就会出现一个弹出窗口

我不确定当我点击弹出按钮时循环的数据是否会显示我按下的信息的详细信息

我不知道我需要做什么，请帮我推荐我，我尝试了半天的搜索和尝试，但我真的做不到

这是我的示例代码

我试着在order.html上创建一个弹出窗口并编写一个脚本

它可以按下订单按钮，弹出窗口只能显示在数据1中，但其他数据2、3、4、5。。。。无法单击按钮，并且弹出窗口未显示

order.html

{% load cropping %}

<div>
      <p>{{ order.name }}<p>
    
      <button id="myBtn">ORDER</button>
</div>
<div id="myModal">
  <div class="show-content">
    <span class="close">&times;</span>
    <p>
      Show menu info clicked #This will show the data of the data that I clicked on.
   </p>
  </div>
</div>
<script>
   var modal = document.getElementById("myModal");
   var btn = document.getElementById("myBtn");
   var span = document.getElementsByClassName("close")[0];

   btn.onclick = function() {
     modal.style.display = "block";
   }

   span.onclick = function() {
     modal.style.display = "none";
   }

   window.onclick = function(event) {
     if (event.target == modal) {
       modal.style.display = "none";
     }
  }
</script>

order.html
{%load CROPING%}
{{order.name}}
命令
&时代；

显示单击的菜单信息#这将显示我单击的数据的数据。

var modal=document.getElementById（“myModal”）；
var btn=document.getElementById（“myBtn”）；
var span=document.getElementsByClassName（“关闭”）[0]；
btn.onclick=函数（）{
modal.style.display=“块”；
}
span.onclick=函数（）{
modal.style.display=“无”；
}
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

---

请帮我推荐一下。非常感谢

这可能是因为您多次使用同一id的按钮。 改用事件侦听器

更改您的按钮并创建一个类：

<button class="myBtn">ORDER</button>

---

如果您有不同订单的不同型号，您可能需要参考具体型号。

谢谢，但我已经尝试了您建议的方法。但还是不行，我按照你的建议换了。无法单击它，消息说-->TypeError:btn.on不是一个函数我在代码中也更新了，但消息说-->（索引）：102未捕获的TypeError:btn.addEventListener不是一个函数。这是因为document.getElementsByClassName返回了一个元素数组。我能做到。非常感谢，我还有几个问题。你能帮助我吗？

var btns = document.getElemenstByClassName("myBtn");
Array.from(btns).forEach((btn) => {
  btn.addEventListener('click', () => {
    modal.style.display = 'block';
  });
});