Как создать всплывающее окно при нажатии кнопки заказа?

Question

Я попытался создать всплывающее окно, и теперь оно работает и отображается.

Но моя проблема в том, что я не могу щелкнуть и показать каждое всплывающее окно. Он работает только с первой кнопкой меню.

Я хочу. Когда я хочу щелкнуть меню, для этого меню появится всплывающее окно. Но я не знаю, что мне делать. Это может быть так.

Это образец изображения, который мне нужен. Могу сделать как на картинке. Но не могу нажимать каждую кнопку.

Это мой код.

Шаблон -> заказ. html

<div class="px-6 py-4">

  <div class="py-2 px-3 bg-yellow-100 text-black">
    <div class="relative flex">
        <div class="text-xl text-bold text-center">name</div>
    </div>
    <p class="p-2 leading-none">descriptions</p>
    <div class="relative mb-4 pb-2">
        <div class="absolute right-0">
            <button id="myBtn" class="bg-gray-300 text-black text-xs">
             order
            </button>
        </div>
    </div>
  </div>
</div>
<div id="myModal" class="show">

 <div class="show-content">
  <span class="close">&times;</span>
  <p class="p-6 text-black">
      Show menu info clicked
  </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

Это не проблема python.

1. У вас не может быть нескольких идентификаторов.
2. Вам нужно переместить сценарий за пределы html, который вы зацикливаете
3. Дайте странице дополнительный div и l oop html внутри этого div
4. Дайте модальному текстовому контейнеру идентификатор
5. Делегировать из контейнера - так что все щелчки в контейнер может быть захвачен
6. Дайте элементу name и элементу описания имя класса для доступа к нему с помощью

// this will live in an external file you will load in the head of the page
window.addEventListener("load", function() {
  document.getElementById("container").innerHTML += `<div id="myModal" class="hide">
  <div class="show-content">
    <span class="close">&times;</span>
    <p class="p-6 text-black" id="modalInfo">
      Show menu info clicked
    </p>
  </div>
</div>`; // OR make it part of the static content but then at the end of the container

  const myModal = document.getElementById("myModal");
  document.getElementById("container").addEventListener("click", function(e) {
    const tgt = e.target;
    if (tgt.classList.contains("openModal")) {
      const orderDiv = tgt.closest(".orderDiv");
      myModal.querySelector("#modalInfo").innerHTML = orderDiv.querySelector(".name").innerHTML + '<br/>' + orderDiv.querySelector(".desc").innerHTML;
      myModal.classList.toggle("hide");
    } else if (tgt.classList.contains("close")) {
      myModal.classList.toggle("hide");
    }
  })
})

.hide {
  display: none
}

<div id="container"><!-- part of static -->
  <div class="px-6 py-4 orderDiv">
    <div class="py-2 px-3 bg-yellow-100 text-black">
      <div class="relative flex">
        <div class="text-xl text-bold text-center name">Name 1</div>
      </div>
      <p class="p-2 leading-none desc">Description 1</p>
      <div class="relative mb-4 pb-2">
        <div class="absolute right-0">
          <button class="openModal bg-gray-300 text-black text-xs">order</button>
        </div>
      </div>
    </div>
  </div>
  <div class="px-6 py-4 orderDiv">
    <div class="py-2 px-3 bg-yellow-100 text-black">
      <div class="relative flex">
        <div class="text-xl text-bold text-center name">Name 2</div>
      </div>
      <p class="p-2 leading-none desc">Description 2</p>
      <div class="relative mb-4 pb-2">
        <div class="absolute right-0">
          <button class="openModal bg-gray-300 text-black text-xs">order</button>
        </div>
      </div>
    </div>
  </div>
</div><!-- part of static -->