我无法加载 bootstrap 模态

Question

谁能告诉我为什么我无法加载 bootstrap 模式？我试图在 blade 文件中运行它，它没有显示任何内容。它从 href 重定向到 url，但不显示任何内容：

<a href="#resetPassword" class="dropdown-item" data-toggle="modal">
    <i class="fas fa-key mr-1"></i> Modal Test
</a>
<!-- Bootstrap Modal -->

<div class="modal fade" id="resetPassword" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document" style="width:px;">
        <div class="modal-content">
            <div class="modal-header text-center">
                <h4 class="modal-title w-100 font-weight-bold">{{ __('trans.changepassword') }}</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body mx-3">
                <div class="md-form mb-3">
                    <form method="" action="" enctype="multipart/form-data">
                        <div class="form-group row">
                            <div class="col-md-4 col-form-label">
                                <label for="current_password">{{ __('trans.currentpassword') }}</label>
                            </div>
                            <div class="col-md-8">
                                <input id="current_password" type="password" class="form-control @error('current_password') is-invalid @enderror" name="current_password" required autocomplete="new-password">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-secondary" data-dismiss="modal">{{ __('trans.cancel') }}</button>
                            <button type="submit" class="btn btn-success">{{ __('trans.changepassword') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

问题出在您的 css 和 js 文件中。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />

<a href="#resetPassword" class="dropdown-item" data-toggle="modal">
  <i class="fas fa-key mr-1"></i> Modal Test
</a>
<!-- Bootstrap Modal -->

<div class="modal fade" id="resetPassword" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document" style="width:px;">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">{{ __('trans.changepassword') }}</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-3">
          <form method="" action="" enctype="multipart/form-data">
            <div class="form-group row">
              <div class="col-md-4 col-form-label">
                <label for="current_password">{{ __('trans.currentpassword') }}</label>
              </div>
              <div class="col-md-8">
                <input id="current_password" type="password" class="form-control @error('current_password') is-invalid @enderror" name="current_password" required autocomplete="new-password">
              </div>
            </div>
            <div class="modal-footer">
              <button type="submit" class="btn btn-secondary" data-dismiss="modal">{{ __('trans.cancel') }}</button>
              <button type="submit" class="btn btn-success">{{ __('trans.changepassword') }}</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/popper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

我无法加载 bootstrap 模态

I am not able to load bootstrap modal

laravel

bootstrap-4

bootstrap-modal

laravel-blade