单击按钮时模态不打开

Question

我试图在单击按钮时在模态窗口中显示数据。这是我编写的 HTML 代码，一切看起来都很好，但是当我单击按钮时它不会打开模式。如果我在脚本中放置一个警报，当我单击按钮时它会弹出，但其他任何类似模式的东西都不起作用。我做错了什么？

    <tr th:each="course : ${courses}">
                <td th:text="${course.courseid}"></td>
                <td th:text="${course.name}"></td>
                <td th:text="${course.year}"></td>
                <td th:text="${course.syllabus}"></td>
                <td th:text="${course.semester}"></td>
                <td th:text="${course.attendance}"></td>
                <td>
                    <a th:href="@{/courses/getOne/(courseid=${course.courseid})}" class="btn btn-sm btn-success" onclick="openModal()" ><img src="https://i.ibb.co/YcxKhdh/pencil-removebg-preview.png" width="20" /></a>
                    <script>
                        function openModal() {
                            $(document).ready(function(){
                                    
                                event.preventDefault();
                                var href = $(this).attr("href");
                                
                                $.get(href, function(course, status){
                                    $(".editForm .courseid").val(course.courseid);
                                    $(".editForm .name").val(course.name);
                                    $(".editForm .year").val(course.year);
                                    $(".editForm .syllabus").val(course.syllabus);
                                    $(".editForm .semester").val(course.semester);
                                    $(".editForm .attendance").val(course.attendance);
                                });
                                
                                $("#editModal").modal('show');
                                
                            });
                                
                        }
                    </script>

<div class="editFrom" id="editModal">
<form th:action="@{/courses/editCourse}" method="POST">
 <div class="modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content" style="background-color:#383434">

      <!-- Modal Header -->
              <div class="modal-header">
                <h4 class="modal-title" id="editModal">Update Course</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
              </div>
        
              <!-- Modal body -->
              <div class="modal-body" style="background-color:#383434">
                
                    <label for="courseidEdit" class="col-form-label">ID</label>
                    <input style="background-color:#CDCDCD" type="text" class="form-control" id="courseidEdit" name="courseidEdit" value="" />
                
                    <label for="nameEdit" class="col-form-label">Name</label>
                    <input style="background-color:#CDCDCD" type="text" class="form-control" id="nameEdit" name="nameEdit" value="" />      
                
                    <label for="yearEdit" class="col-form-label">Year</label>
                    <input style="background-color:#CDCDCD" type="text" class="form-control" id="yearEdit" name="yearEdit" value="" />
              
                    <label for="syllabusEdit" class="col-form-label">Syllabus</label>
                    <input style="background-color:#CDCDCD" type="text" class="form-control" id="syllabusEdit" name="syllabusEdit" value="" />

                    <label for="semesterEdit" class="col-form-label">Semester</label>
                    <input style="background-color:#CDCDCD" type="text" class="form-control" id="semesterEdit" name="semesterEdit" value="" />
            
                    <label for="attendanceEdit" class="col-form-label">Attendance</label>
                    <input style="background-color:#CDCDCD" type="text" class="form-control" id="attendanceEdit" name="attendanceEdit" value="" />
              </div>
                
        
              <!-- Modal footer -->
              <div class="modal-footer">
                 <button type="submit" class="btn btn-success">Update</button>
                 <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
              </div>
    
        </div>
        </div>
 </div>
</form>

Answer 1

添加 data-bs-toggle 和 data-bs-target，适用于 bootstrap

<a data-bs-toggle="modal" data-bs-target="#editModal" th:href="@{/courses/getOne/(courseid=${course.courseid})}" class="btn btn-sm btn-success" onclick="openModal()">
    <img src="https://i.ibb.co/YcxKhdh/pencil-removebg-preview.png" width="20" />
</a>

Answer 2

希望这项工作。

 <tr th:each="course : ${courses}">
                <td th:text="${course.courseid}"></td>
                <td th:text="${course.name}"></td>
                <td th:text="${course.year}"></td>
                <td th:text="${course.syllabus}"></td>
                <td th:text="${course.semester}"></td>
                <td th:text="${course.attendance}"></td>
                <td>
                    <a th:href="@{/courses/getOne/(courseid=${course.courseid})}" class="btn btn-sm btn-success" onclick="openModal()" ><img src="https://i.ibb.co/YcxKhdh/pencil-removebg-preview.png" width="20" /></a>
                    <script>
                        function openModal() {
                                    
                                event.preventDefault();
                                var href = $(this).attr("href");
                                
                                $.get(href, function(course, status){
                                    $(".editForm #courseidEdit").val(course.courseid);
                                    $(".editForm #nameEdit").val(course.name);
                                    $(".editForm #yearEdit").val(course.year);
                                    $(".editForm #syllabusEdit").val(course.syllabus);
                                    $(".editForm #semesterEdit").val(course.semester);
                                    $(".editForm #attendanceEdit").val(course.attendance);
                                });
                                
                                $("#editModal").modal('show');
                                
                        }
                    </script>

<div class="modal" id="editModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content" style="background-color:#383434">

      <!-- Modal Header -->
              <div class="modal-header">
                <h4 class="modal-title" id="editModal">Update Course</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
              </div>
        
              <!-- Modal body -->
              <div class="modal-body" style="background-color:#383434">
                <form class="editForm" th:action="@{/courses/editCourse}" method="POST">
                    <label for="courseidEdit" class="col-form-label">ID</label>
                    <input style="background-color:#CDCDCD" type="text" class="form-control" id="courseidEdit" name="courseidEdit" value="" />
                
                    <label for="nameEdit" class="col-form-label">Name</label>
                    <input style="background-color:#CDCDCD" type="text" class="form-control" id="nameEdit" name="nameEdit" value="" />      
                
                    <label for="yearEdit" class="col-form-label">Year</label>
                    <input style="background-color:#CDCDCD" type="text" class="form-control" id="yearEdit" name="yearEdit" value="" />
              
                    <label for="syllabusEdit" class="col-form-label">Syllabus</label>
                    <input style="background-color:#CDCDCD" type="text" class="form-control" id="syllabusEdit" name="syllabusEdit" value="" />

                    <label for="semesterEdit" class="col-form-label">Semester</label>
                    <input style="background-color:#CDCDCD" type="text" class="form-control" id="semesterEdit" name="semesterEdit" value="" />
            
                    <label for="attendanceEdit" class="col-form-label">Attendance</label>
                    <input style="background-color:#CDCDCD" type="text" class="form-control" id="attendanceEdit" name="attendanceEdit" value="" />
                </form>                    
              </div>
                
        
              <!-- Modal footer -->
              <div class="modal-footer">
                 <button type="submit" class="btn btn-success">Update</button>
                 <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
              </div>
    
        </div>
        </div>
 </div>

更新：在这里添加我在问题上添加的评论。

您不需要 document.ready 事件，因为您通过单击按钮打开模式，这意味着您的 dom 已经准备就绪。
Modal 和 Form 的层次结构不正确，Form 应该在 Modal 内部，您应该在模态实例上而不是在表单上调用方法 .modal('show')。
如评论中所述，您的数据未反映在控件中，原因可能是 $(".editForm .courseid")、$(".editForm .name") 等未出现在 html. （用正确的 selectors 更新答案）。

单击按钮时模态不打开

Modal not opening when I click on button

html

javascript

jquery

modal-dialog

thymeleaf