可以重复的弹出按钮CSS/JavaScript

发布于 2025-02-08 14:45:38 字数 6788 浏览 0 评论 0原文

我正在创建一个春季/百里香Web应用程序，现在遇到了这个问题。我正在网页上向桌子上台，并且在桌子上的每个实体上都有弹出窗口的按钮。看起来像这样：

但是有问题。只有一个按钮“单击！”实际上是可单击的，这就是实体上具有ID 1的按钮。如果我要显示更多实体，即更多记录，除了第一个记录外，该按钮将无法单击其他所有记录。弹出窗口是使用JavaScript创建的。有html：

body {
  font-family: Arial, Helvetica, sans-serif;
}


/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content */

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}


/* The Close Button */

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.something th {
  font-size: 12px;
  font-weight: bold;
}

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <title>Welcome to My Application</title>
  <link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" />

</head>

<body>
  <div class="container-fluid text-center">
    <div>
      <h2>Manage Wars</h2>
    </div>
    <div class="m-2">
      <a class="h3" th:href="@{/wars/new}">Add New War</a>
    </div>
    <div class="m-2">
      <a class="h3" th:href="@{http://localhost:8080/}">Back to Main Menu</a>
    </div>
    <div th:if="${messageW}" class="alert alert-success">
      [[${messageW}]]
    </div>
    <div>
      <table class="table table-bordered">
        <thead class="thead-dark">
          <tr>
            <th>ID</th>
            <th>Name of War</th>
            <th>Participating States</th>
            <th>Date of Beginning</th>
            <th>Date of End</th>
            <th>Victor</th>
            <th>Outcome</th>
            <th>Details</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <th:block th:each="war : ${listWars}">
            <tr>
              <td>[[${war.idWar}]]</td>
              <td>[[${war.warName}]]</td>
              <td>[[${war.participatingStates}]]</td>
              <td>[[${war.dateOfBeginning}]]</td>
              <td>[[${war.dateOfEnd}]]</td>
              <td>[[${war.victor}]]</td>
              <td>[[${war.results}]]</td>
              <td>
                <button id="myBtn">Click!</button>
              </td>
              <td>
                <a class="h5 mr-3" th:href="@{'/wars/edit/' +${war.idWar}}">Edit</a>
                <a class="h5" th:href="@{'/wars/delete/' +${war.idWar}}">Delete</a>
              </td>
            </tr>
          </th:block>
        </tbody>
      </table>
    </div>
    <div id="myModal" class="modal">
      <div class="modal-content">
        <span class="close">&times;</span>
        <p>
          <div class="m-2">
            <a class="h3" th:href="@{/stateWars/new}">Add New State-War (details)</a>
          </div>
          <div class="container-fluid text-center">
            <div>
              <table class="table table-bordered">
                <thead class="thead-dark">
                  <tr class="something">
                    <th>State Name</th>
                    <th>Territory during War</th>
                    <th>Population during War (in mln)</th>
                    <th>GDP during War (in bln)</th>
                    <th>On Date</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  <th:block th:each="stateWar : ${stateWars}">
                    <tr>
                      <td>[[${stateWar.stateW.getOfficialStateName}]]</td>
                      <td>[[${stateWar.territoryWar}]]</td>
                      <td>[[${stateWar.populationWar}]]</td>
                      <td>[[${stateWar.gdpWar}]]</td>
                      <td>[[${stateWar.onDateWar}]]</td>
                      <td>
                        <a class="h6 mr-3" th:href="@{'/stateWars/edit/' +${stateWar.warSKey}}">Edit</a>
                        <a class="h6" th:href="@{'/stateWars/delete/' +${stateWar.warSKey}}">Delete</a>
                      </td>
                    </tr>
                  </th:block>
                </tbody>
              </table>
            </div>
          </div>
        </p>
      </div>
    </div>
  </div>
  <script>
    // Get the modal
    var modal = document.getElementById("myModal");
    // Get the button that opens the modal
    var btn = document.getElementById("myBtn");
    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks the button, open the modal
    btn.onclick = function() {
      modal.style.display = "block";
    }

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
      modal.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
    }
  </script>
</body>

</html>

如何为表中的每个记录复制该按钮？有办法做到吗？如果没有，我可以使用什么选择？

原文

I am creating a Spring/Thymeleaf web application and now stuck at this problem. I am diplaying a table on a webpage, and there are buttons for pop-up windows on every entity that is in the table. So it looks like this:

But there is a problem. Only one button "Click!" is actually clickable and that is the button on the entity with id 1. If I were to display more entities i.e. more records, that button will not be clickable on every other record besides the very first one. The pop-up window is created using JavaScript. There is html:

body {
  font-family: Arial, Helvetica, sans-serif;
}


/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content */

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}


/* The Close Button */

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.something th {
  font-size: 12px;
  font-weight: bold;
}

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <title>Welcome to My Application</title>
  <link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" />

</head>

<body>
  <div class="container-fluid text-center">
    <div>
      <h2>Manage Wars</h2>
    </div>
    <div class="m-2">
      <a class="h3" th:href="@{/wars/new}">Add New War</a>
    </div>
    <div class="m-2">
      <a class="h3" th:href="@{http://localhost:8080/}">Back to Main Menu</a>
    </div>
    <div th:if="${messageW}" class="alert alert-success">
      [[${messageW}]]
    </div>
    <div>
      <table class="table table-bordered">
        <thead class="thead-dark">
          <tr>
            <th>ID</th>
            <th>Name of War</th>
            <th>Participating States</th>
            <th>Date of Beginning</th>
            <th>Date of End</th>
            <th>Victor</th>
            <th>Outcome</th>
            <th>Details</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <th:block th:each="war : ${listWars}">
            <tr>
              <td>[[${war.idWar}]]</td>
              <td>[[${war.warName}]]</td>
              <td>[[${war.participatingStates}]]</td>
              <td>[[${war.dateOfBeginning}]]</td>
              <td>[[${war.dateOfEnd}]]</td>
              <td>[[${war.victor}]]</td>
              <td>[[${war.results}]]</td>
              <td>
                <button id="myBtn">Click!</button>
              </td>
              <td>
                <a class="h5 mr-3" th:href="@{'/wars/edit/' +${war.idWar}}">Edit</a>
                <a class="h5" th:href="@{'/wars/delete/' +${war.idWar}}">Delete</a>
              </td>
            </tr>
          </th:block>
        </tbody>
      </table>
    </div>
    <div id="myModal" class="modal">
      <div class="modal-content">
        <span class="close">×</span>
        <p>
          <div class="m-2">
            <a class="h3" th:href="@{/stateWars/new}">Add New State-War (details)</a>
          </div>
          <div class="container-fluid text-center">
            <div>
              <table class="table table-bordered">
                <thead class="thead-dark">
                  <tr class="something">
                    <th>State Name</th>
                    <th>Territory during War</th>
                    <th>Population during War (in mln)</th>
                    <th>GDP during War (in bln)</th>
                    <th>On Date</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  <th:block th:each="stateWar : ${stateWars}">
                    <tr>
                      <td>[[${stateWar.stateW.getOfficialStateName}]]</td>
                      <td>[[${stateWar.territoryWar}]]</td>
                      <td>[[${stateWar.populationWar}]]</td>
                      <td>[[${stateWar.gdpWar}]]</td>
                      <td>[[${stateWar.onDateWar}]]</td>
                      <td>
                        <a class="h6 mr-3" th:href="@{'/stateWars/edit/' +${stateWar.warSKey}}">Edit</a>
                        <a class="h6" th:href="@{'/stateWars/delete/' +${stateWar.warSKey}}">Delete</a>
                      </td>
                    </tr>
                  </th:block>
                </tbody>
              </table>
            </div>
          </div>
        </p>
      </div>
    </div>
  </div>
  <script>
    // Get the modal
    var modal = document.getElementById("myModal");
    // Get the button that opens the modal
    var btn = document.getElementById("myBtn");
    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks the button, open the modal
    btn.onclick = function() {
      modal.style.display = "block";
    }

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
      modal.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
    }
  </script>
</body>

</html>

How to I duplicate that button for every record in the table? Is there is a way to do that? If no, what are the alternatives I can use?

分享到QQ

分享到微博