我无法加载引导模式

Posted 2023-03-21

【中文标题】我无法加载引导模式

【英文标题】：I am not able to load bootstrap modal

【发布时间】：2021-12-21 00:21:44

【问题描述】：

谁能告诉我为什么？ 我试图在刀片文件中运行它，它没有显示任何内容。它从 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>

【问题讨论】：

你能试试用data-target="#resetPassword"代替href吗？

@matiaslauriti 它没有显示任何东西

【参考方案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>