javascript - 打开由 while 循环生成的具有相同类名的多个按钮提示的非引导模式（弹出对话框/模式）

Question

var editModal = document.getElementById("editSemModal");
        var editBtn = document.getElementsByClassName("semEditBtn");
        var editSpan = document.getElementsByClassName("editClose")[0];
        var editCancelbtn = document.getElementById("editCancel-btn");

        for (var i = 0; i < editBtn.length; i++) {
            editBtn[i].onclick = function() {
                editModal.style.display = "block";
            }
        }

        editBtn.onclick = function() {
          editModal.style.display = "block";
        }
        
        editSpan.onclick = function() {
          editModal.style.display = "none";
        }

        editCancelbtn.onclick = function() {
          editModal.style.display = "none";
        }



        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
        //this is for my working modal that is not included in this question
            if (event.target == modal) {
            modal.style.display = "none";
          }
          // this is the modal im having problems with
          else if (event.target == editModal) {
            editModal.style.display = "none";
          }
        }

<div class="semester-info">
     <div id="addSemModal" class="modal">

        <div class="modal-content">
            <div class="modal-header">
                <span class="close">&times;</span>
                <h2>Semester Information</h2>
            </div>
            <div class="modal-body">
            <form method="post">
                <table style="width: 60%;">
                    <tr>
                        <td>SEMESTER YEAR</td>
                        <td>
                            <select name="semYear" id="semYear">
                                    <option value="<?php ?>"><?php ?></option>
                                    <option value="Y1">Year 1</option>
                                    <option value="Y2">Year 2</option>
                                    <option value="Y3">Year 3</option>
                                    <option value="Y4">Year 4</option>
                                    <option value="Y5">Year 5</option>
                            </select>
                        </td>                        
                    </tr>
                    <tr>
                        <td>SEMESTER NUMBER</td>
                        <td>
                            <select name="semNumber" id="semNumber">
                                    <option value="<?php ?>"><?php ?></option>
                                    <option value="S1">Sem 1</option>
                                    <option value="S2">Sem 2</option>
                                    <option value="S3">Sem 3</option>
                            </select>
                        </td>                         
                    </tr>
                    <tr>
                        <td>SEMESTER MONTH</td>
                        <td>
                            <select name="semMonth" id="semMonth">
                                    <option value="<?php ?>"><?php ?></option>
                                    <option value="January">January</option>
                                    <option value="May">May</option>
                                    <option value="October">October</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>SEMESTER CURRENT YEAR</td>
                        <td><input type="number" name="semCurrentYear" min="2019" max="2099" placeholder="2020" value="<?php ?>"></td>
                    </tr>
                    <tr>
                        <td>SEMESTER DESCRIPTION</td>
                        <td><input type="text" name="semDesc" maxlength="55"  value="<?php ?>"></td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <input type="submit" id="save-btn" value="Save">
                <button id="cancel-btn">Cancel</button>
            </div>
            </form>
        </div>

    </div>
    </div>


    <div class="sems" id="sems">
                        <?php
                        $semester = new Semester();
                        $query = "select * from semester where userid = '$userid'";
        
                        $DB = new Database();
                        $conn = $DB->connect();
                        $result = mysqli_query($conn,$query);
                        $num_rows = mysqli_num_rows($result);
    
                        //check if no rows returned
                        if ($num_rows != 0){
                            while($row = mysqli_fetch_array($result)) {
                        ?> 
                                <a href="">
                                    <div class="sem">
                                        <button type="button" id="semEditBtn" class="semEditBtn">Edit</button>
                                        <h2 class="semH2"> <?php echo $row['semYear'] . $row['semNumber']; ?> </h2>
                                        <h4 class="semH4"> <?php echo $row['semMonth'] . " " . $row['semCurrentYear']; ?> </h4><br>
                                        <div class="sem-container">
                                            <div class="percent">
                                                <div class="skills" style="width: 20%; background-color: #41B3A3;"></div>
                                            </div>
                                            <div class="progress-percent">
                                                <p>20%</p>
                                            </div>
                                        </div>
                                        <p> <?php echo $row['semDesc']; ?></p>
                                    </div>
                                </a>   
                                <?php
                        }      
                    }
                
                    //no semesters created error message
                    else {
                        echo "<h3 class='addSemErrorMsg' style='text-align: center; font-weight:500; font-size: 18px; margin-top:150px;'>No semesters created yet!<h3>";
                    }
                ?>
            </div>

在我的项目中，我的目标是为用户单击“添加学期”按钮时从数据库中检索到的每一行创建一个全新的学期 div。我已经完成了这部分的所有工作。

我现在的问题是，当我为我制作的每个学期 div 单击“编辑”按钮时，我希望弹出一个非引导模式并使用户能够编辑和更新他们放置的上一学期信息。

现在，我的问题是每当我单击每个学期 div 上的“编辑”按钮时，弹出模式都会显示大约一秒钟，并且永远不会停留在屏幕上。

在网上寻找一些解决方案，我遇到了 CRUD。然而，互联网上大多数关于执行 CRUD 编辑的教程都是在 Bootstrap 模式下进行的。此外，我还没有遇到任何为返回的每一行创建一个全新的 div 的教程（它总是只在表中）。

我拒绝使用 Bootstrap 模式的唯一原因是它的设计，它以某种方式破坏了我网站的整体布局（即使在我自己的样式表链接之前放置了 Bootstrap CDN 链接）。无论如何，有没有办法让我在不使用 Bootstrap 模式的情况下完成这个任务？

我从这里得到了 CSS/JS 模式：https ://www.w3schools.com/howto/howto_css_modals.asp

标签： javascriptphphtmlcssmodal-dialog