单击按钮时 HTML Modal 不显示，隐藏时替换其他元素

Question

我不确定我哪里错了。这是我第一次使用模式，但有必要让我的用户注册该服务。我正在关注模态的引导程序教程，因此它们现在是样板文件。单击“注册”按钮时，我无法显示它。

就目前而言，模态正在移动我当前所有的 html 元素，但不会在单击按钮时显示。

<section>
    <div class="page-header min-vh-100">
      <div class="container">
        <div class="row">
          <div class="col-xl-4 col-lg-5 col-md-7 d-flex flex-column mx-lg-0 mx-auto">
            {{ form.csrf_token }}
              <div id="login-card" class="card card-plain">
                <div class="card-header pb-0 text-left">
                  <h4 class="font-weight-bolder">Welcome back</h4>
                  <p class="mb-0">Sign in to start exploring Fellos' podcast builder</p>
                </div>
                <div id="signincard" class="card-body">
                  
                  <div id="emaildiv">
                    {{form.email}}
                  </div>

                  <div id="passworddiv">
                    {{form.password}}
                  </div>
                  <input class="btn btn-lg bg-gradient-primary btn-lg w-100 mt-4 mb-0" id="login-button" name="submit" type="button" value="Sign In" data-clipboard-target="#query">

                  <div id="forgot_or_signup">
                    <button id="forgotpass" type="button">Forgot Password?</button>
                    <button id="sign_up" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                      Sign Up!
                    </button>
                    <!-- Modal -->
                    <div class="modal fade" id="exampleModal" 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">Modal title</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">&times;</span>
                            </button>
                          </div>
                          <div class="modal-body">
                            ...
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                          </div>
                        </div>
                      </div>
                    </div>
                    
               
                </div>
                
              </div>
          
          <div class="col-6 d-lg-flex d-none h-100 my-auto pe-0 position-absolute top-0 end-0 text-center justify-content-center flex-column">
            <div class="position-relative h-100 m-3 px-7 border-radius-lg d-flex flex-column justify-content-center" style="background-color: black;">
              <img src="{{ url_for('static', filename='assets/img/shapes/pattern-lines.svg') }}" alt="pattern-lines" class="position-absolute opacity-8 start-0">
              <div class="position-relative mt-6">
                <img class="max-width-500 w-100 position-relative z-index-2" src="{{ url_for('static', filename='assets/img/WELLFOUND_EMBLEM_WHITE.png') }}" alt="image">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>