如何在JavaScript中写模式弹出窗口

Question

我有一个表格显示数据的表格，并希望该按钮在单击时显示模态弹出窗口。我已经写了一个JavaScript代码来执行此操作，但它不起作用。我对JavaScript没有太多了解。单击时，“编辑”按钮未显示弹出模式。我真的不知道该错误是来自JavaScript文件还是HTML页面。

        Here is the Javascript file that I named country.js
        
        
        $('document').ready(function(){
            $('table #editButton').on('click',function(event){
                $('#editModal').modal();
            });
        });
        
        Here is the html where the data is displayed.
        
        <section class="section dashboard">
            <div class="row">
        
              <!-- Left side columns -->
        
              <div class="row">
                <div class="col-lg-9 col-md-12">
        
                  <div class="panel panel-default">
                    <div class="panel-heading">
                  <!-- Image background -->
                      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addModal" data-whatever="@mdo">Add A Country</button>
                   <h1>List of Country</h1>
                      <table class="table">
                        <thead>
                        <tr>
                          <th>Id</th>
                          <th>Code</th>
                          <th>Capital</th>
                          <th>Description</th>
                          <th>Nationality</th>
                          <th>Continent</th>
                          <th>Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="country:${countries}">
                          <td th:text="${country.getId}"></td>
                          <td th:text="${country.getCode}"></td>
                          <td th:text="${country.getCapital}"></td>
                          <td th:text="${country.getDescription}"></td>
                          <td th:text="${country.getNationality}"></td>
                          <td th:text="${country.getContinent}"></td>
                          <td>
                            <div class="btn-group">
                            <a class="btn btn-primary" id="editButton">Edit</a>                  
                            </div>
                          </td>
                        </tr>
                        </tbody>
                      </table>
        
                    </div><!-- End of Image background -->
            </div><!-- End Left side columns -->
            </div>
              </div>
            </div>
          </section>
        
        And this is the modal popup in the html page and I have also called the javascript file in this html page but I don't know why the popup is not displaying
        
        <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="editModalLabel">Update Country</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <form th:action="@{/countries/addNew}" method="post">
                  <div class="form-group">
                    <label for="codeEdit" class="col-form-label">Code:</label>
                    <input type="text" class="form-control" id="codeEdit" name="code">
                  </div>
                  <div class="form-group">
                    <label for="capitalEdit" class="col-form-label">Capital:</label>
                    <input type="text" class="form-control" id="capitalEdit" name="capital">
                  </div>
                  <div class="form-group">
                    <label for="descriptionEdit" class="col-form-label">Description:</label>
                    <input type="text" class="form-control" id="descriptionEdit" name="description">
                  </div>
                  <div class="form-group">
                    <label for="nationalityEdit" class="col-form-label">Nationality:</label>
                    <input type="text" class="form-control" id="nationalityEdit" name="nationality">
                  </div>
                  <div class="form-group">
                    <label for="continentEdit" class="col-form-label">Continent:</label>
                    <input type="text" class="form-control" id="continentEdit" name="continent">
                  </div>
                  <div class="form-group">
                    <button type="submit" class="btn btn-primary">Submit</button>
                  </div>
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        
              </div>
            </div>
          </div>
        </div>
        
        <!-- Vendor JS Files -->
        <script src="assets/vendor/apexcharts/apexcharts.min.js"></script>
        <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
        <script src="assets/vendor/chart.js/chart.min.js"></script>
        <script src="assets/vendor/echarts/echarts.min.js"></script>
        <script src="assets/vendor/quill/quill.min.js"></script>
        <script src="assets/vendor/simple-datatables/simple-datatables.js"></script>
        <script src="assets/vendor/tinymce/tinymce.min.js"></script>
        <script src="assets/vendor/php-email-form/validate.js"></script>
        
        <!-- Template Main JS File -->
        <script src="assets/js/main.js"></script>
        <script src="assets/js/country.js"></script>
        </body>
        
          

Answer 1

您的示例代码不仅是常规的JavaScript，而且看起来像jQuery，看起来您正在尝试使用jQuery模态插件。如果这是您要走的路线，则需要进行一些取决于您特定情况的设置。您的代码和设置是如此复杂和具体，以至于我建议在进行或重建申请中此特定部分之前学习更多基础知识。

还;您正在使用ID来定位您的元素，但是您具有多个具有相同ID的元素，这绝对不会发生。

在下面，我只使用HTML，CSS和Vanilla（含义Pline）JS进行自定义的“模态”类型的小型演示

function toggleModal(e) {
    e.stopPropagation()
    backdrop.classList.toggle("active")
}
const backdrop = document.querySelector(".backdrop")
const button = document.querySelector("button")
backdrop.addEventListener("click", toggleModal)
button.addEventListener("click", toggleModal)

.backdrop {
  display: none;
  position: fixed;
  width:100vw;
  height:100vh;
  cursor:pointer;
  background:#00000088;
  top: 0;
}
.backdrop.active {
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal {
  background: #ffffff;
  min-width:30vw;
  min-height: 30vh;
  cursor:initial;
}

<button>OpenModal</button>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel consectetur ex, id pharetra ex. In ligula leo, euismod eu gravida sed, facilisis non dolor. In hac habitasse platea dictumst. Aenean sapien dolor, aliquam quis odio a, feugiat rutrum turpis. Duis eu eleifend urna. Fusce quis quam hendrerit, varius nibh sed, tempor erat. Fusce iaculis finibus lacus in fringilla. Nullam tincidunt odio eu efficitur lacinia. Vivamus id tempus mauris, in laoreet magna. Integer ornare, odio quis ullamcorper ultrices, purus nisl elementum erat, id semper eros nunc et orci. Morbi neque purus, fringilla ut rutrum quis, commodo vel arcu.</p>
<p>Integer sit amet volutpat ante. Donec sed sem non nisi hendrerit volutpat ac vel ante. Suspendisse nec nulla interdum, aliquam mauris non, porta elit. Suspendisse potenti. Proin placerat tincidunt malesuada. Nullam accumsan mi finibus orci pretium pharetra. Nunc at efficitur leo, sit amet ultrices arcu. Aenean non nibh congue, efficitur justo et, posuere ante. Phasellus maximus augue at pulvinar pulvinar. Integer tempor, orci eu pellentesque finibus, enim tortor hendrerit dui, quis semper lorem dolor ac nulla. Mauris congue venenatis blandit. Pellentesque a mi in odio venenatis iaculis vel non elit.</p>

<div class="backdrop">
  <div class="modal">
    I am a modal
  </div>
</div>