How do I create a popup in python?

Question

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

frunkad · Accepted Answer · 2020-07-10 09:17:14Z

1

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.

edited Jul 10, 2020 at 9:17

answered Jul 10, 2020 at 8:50

frunkad

2,5522 gold badges25 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

hanizo Over a year ago

Thanks, But I have tried the method you suggested. But it still can't do.

hanizo Over a year ago

I changed as you suggested. It can't be clicked and the message says --> TypeError: btn.on is not a function

hanizo Over a year ago

I updated too in my code, But the message says --> (index):102 Uncaught TypeError: btn.addEventListener is not a function.

frunkad Over a year ago

That was because document.getElementsByClassName was returning an array of elements. Edited code

hanizo Over a year ago

I can do it. Thank you very much and I have a few more questions. Can you help me?

|

Collectives™ on Stack Overflow

How do I create a popup in python?

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related