如何运行引导模式？答案

【问题标题】：How to run a bootstrap modal?如何运行引导模式？
【发布时间】：2022-01-09 18:52:08
【问题描述】：

在这里引导新手。我正在使用 bootstrap 4 和一个 html 文件，但我无法让模态正常工作。我使用的代码实际上是 bs4 文档中关于模态的代码。

由于某种原因，引导文档中的代码对我不起作用，当我加载页面并单击模式按钮时，什么也没有发生。

这是我正在使用的代码，摘自bs4 docs。我尝试了 SO 的其他一些答案，但对我没有用，而且我不确定我可能做错了什么。感谢您提供任何帮助。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</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>

【问题讨论】：

该代码看起来不错，请向我们展示您的引导链接...有时您会发现您使用的引导文件需要其他文件，例如 popper.js，而不是捆绑版本。跨度>
当包含 jQuery 和 Bootstrap CSS 和 JS 时，复制粘贴的代码可以正常工作 - here's a working JSFiddle。点击左侧栏的Resources查看包含的文件。
感谢cmets，问题已解决

标签： html bootstrap-modal

【解决方案1】：

添加 jQuery 库并将 bootstrap.min.js 引用到项目中，以便 Bootstrap Modal 工作。将 bootstrap.min.css cdn 引用添加到要应用的引导样式的项目中。

<!-- The following references have been added to the project for the Bootstrap Modal to work. -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</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>

【讨论】：

感谢 Sercan，您的解决方案解决了问题！我没有添加 JQuery 库。我也意识到我确实有一个模板干扰并且没有让模态正常工作。