Bootstrap 4 модальный не загружается только дает блеклый экран

Question

Я пытаюсь загрузить модал начальной загрузки по нажатию кнопки.

Уже у меня есть еще один модал на странице, который работает нормально, но по нажатию кнопки, но когда я пытаюсь загрузить другой модалпри нажатии кнопки, он просто загружается блеклым экраном.

<button class="btn btn-green btn-sm" data-toggle="modal" data-target="#addUserModal"><i class="fa fa-plus"></i> <span>Add User</span></button>

<!-- Add User Modal -->
          <div class="modal fade" id="addUserModal" role="dialog" aria-labelledby="addUserModalLabel" aria-hidden="true">
            <div class="modal-dialog">
              <!-- Modal content-->
              <div class="modal-content">
                <div class="modal-header">
                  <h6 class="modal-title">Add User</h6>
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                  <form action="" method="POST">
                    <div class="input-group mb-3">
                      <div class="input-group-prepend">
                        <span class="input-group-text">User ID</span>
                      </div>
                      <input type="text" class="form-control" id="user_id" value="{{user.UserID}}">
                    </div>
                    <div class="input-group mb-3">
                  </form>
                </div>
                <div class="modal-footer">
                  <button type="submit" class="btn btn-primary">Submit</button>
                  <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
              </div>
            </div>    
          </div>

Answer 1

Может быть, в ваших тегах есть ошибка?Это может вызвать ошибку в вашем модальном теле.

<div class="modal-body">
              <form action="" method="POST">
                <div class="input-group mb-3">
                  <div class="input-group-prepend">
                    <span class="input-group-text">User ID</span>
                  </div>
                  <input type="text" class="form-control" id="user_id" value="{{user.UserID}}">
                </div>
                //removed orphan tag
              </form>
            </div>

При удалении модал работает нормально.

Answer 2

Код, который вы опубликовали, работает нормально

Ссылка Codepen

Убедитесь, что вы добавили jquery, popper.js.