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

Question

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

我使用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>

请帮我推荐一下。多谢各位

Answer 1

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

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

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

在脚本中，将其引用为

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

如果您有不同订单的不同型号，您可能需要参考特定型号