第二个模态窗口未显示

Question

我使用

bootstrap

添加了 2 个模态窗口。第一个是将用户添加到数据库，第二个是编辑用户。因此，第一个工作完美，但负责编辑用户的那个没有显示（它只是使屏幕变暗）。

这是

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>

我该如何解决？

Answer 1

问题是您没有关闭两个模式（添加用户和编辑用户）的

<div class="modal fade" id="user-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

标签。

“添加用户模式”起作用的原因是它可能从其他标签中选择结束标签。 （如果您上下交换模态模板，您会发现顶部的一个会显示，而另一个则不会）。

正确关闭标签即可工作。您可以在此处

验证工作代码

P.S.：您错过了为“编辑”按钮命名。