我用bootstrap添加了两个模式窗口。第一个是用来添加用户到数据库的，第二个是用来编辑的。所以第一个可以很好地工作，但是负责编辑用户的窗口没有显示出来（它只是让屏幕变暗了）。
下面是code：
Modals个

<!--MODAL-->
<div class="modal fade" id="user-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Add User</h5>
          
        </div>
        <div class="modal-body" id = "modal-body">
          <div id = "add-user-form">
            <form action="">

            <div class="col-12">
              <label for="yourUsername" class="form-label">Username</label>
              <div class="input-group has-validation">
                <span class="input-group-text" id="inputGroupPrepend">@</span>
                <input type="text" name="username" class="form-control" id="add-username" placeholder = "Username..." required>
                <div class="invalid-feedback">Please enter your username.</div>
              </div>
            </div>
            <div class="col-12">
              <p id ="unique-user-error"></p>
              <label for="yourUsername" class="form-label">Role</label>
                <label class="col-sm-2 col-form-label">Select</label>
                <div class="col-sm-10">
                  <select class="form-select" aria-label="Default select example" id = "add-role-option">
                    <option value="Programmer">Brogrammer</option>
                    <option value="REngineer">Robotic Engineer</option>
                    <option value="NEngineer">Network Engineer</option>
                  </select>
                </div>
                
          </form>
        </div>
            
        </div>
        <div class="modal-footer">
          <button type="button" data-dismiss="modal" class="btn btn-primary" id ="close-modal-button" >Close</button>
          <button type = "button" data-dismiss = "modal " class="btn btn-success" id ="add-user-button" >Add</button>
        </div>
      </div>
    </div>
  </div>

  <!--MODAL FOR EDITING USER INFO-->
  <div class="modal fade" id="edit-user-modal" tabindex="" role="dialog" aria-labelledby="editUserModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="editUserModalLabel">Add User</h5>
          
        </div>
        <div class="modal-body" id = "modal-body">
          <div id = "edit-user-form">
            <form action="">

            <div class="col-12">
              <label for="yourUsername" class="form-label">Username</label>
              <div class="input-group has-validation">
                <span class="input-group-text" id="inputGroupPrepend">@</span>
                <input type="text" name="username" class="form-control" id="edit-username" placeholder = "Username..." required>
                <div class="invalid-feedback">Please enter your username.</div>
              </div>
            </div>
            <div class="col-12">
             
              <label for="yourUsername" class="form-label">Role</label>
                <label class="col-sm-2 col-form-label">Select</label>
                <div class="col-sm-10">
                  <select class="form-select" aria-label="Default select example" id = "edit-role-option">
                    <option value="Programmer">Brogrammer</option>
                    <option value="REngineer">Robotic Engineer</option>
                    <option value="NEngineer">Network Engineer</option>
                  </select>
                </div>
                
          </form>
        </div>
            
        </div>
        <div class="modal-footer">
          <button type="button" data-dismiss="modal" class="btn btn-primary" id ="close-modal-button" >Close</button>
          <button type = "button" data-dismiss = "modal " class="btn btn-success" id ="add-user-button" >Add</button>
        </div>
      </div>
    </div>
  </div>
  <!--END OF THE MODAL-->

字符串
buttons：

<button class = "btn btn-primary" data-toggle="modal" data-target="#user-modal" > <i class= "bi bi-plus"></i>Add user</button>

<button type = "button" class = "btn btn-info edit-user" data-toggle ="modal" data-target = "#edit-user-modal"><i class="bi bi-pencil"></i></button>

型
my imports：

<!-- Bootstrap JavaScript -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  <!-- Template Main JS File -->
  <script src="{%  static 'core/js/main.js'%}"></script>

型
我该怎么补救？