CODEWITHSUNDEEP
javascriptpythondjango
hanizo
hanizo

Reputation: 33

How do I create a popup in python?

I would like to know how to create a popup when I click the button.

I wrote the code using python and I loop the data that I need. And the data that came out I created a button to press and a popup would appear.

I'm not sure if the data I loop when I clicked on the popup button would show the details of the information I pressed.

I don't know what I need to do Please help recommend me I tried searching and trying for half a day but I really couldn't.

Here is my sample code.

And I've tried creating a popup and writing a script at order.html.

It can press the order button and the popup can only show in data1, but other data2,3,4,5.... cannot click the button and popup it does not show.

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>

Please help recommend me. Thank you very much

Upvotes: 2

Views: 1162

Answers (1)

frunkad
frunkad

Reputation: 2543

It is probably because you are using the same id of button multiple times. Use event listeners instead. Read this more info.

Change your button have a class:

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

and in script, ref it as

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

If you have different models for different orders, you may need to reference the specific one.

Upvotes: 1

Related Questions