引导模式窗口未出现

Posted 2023-05-08

【中文标题】引导模式窗口未出现

【英文标题】：Bootstrap modal window not appearing

【发布时间】：2020-05-18 00:02:40

【问题描述】：

我直接从引导站点获取引导模式窗口的代码，因此我的 .html.erb 文件中有此代码。但是当我单击按钮时，页面上什么也没有出现。有人对为什么会这样有任何想法吗？

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">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>

【问题讨论】：

你添加了所有需要的东西吗？ getbootstrap.com/docs/4.4/getting-started/introduction

欢迎来到 Stack Overflow Greg！所以这里有几种可能性。我推荐的一件事是使用开发工具检查模式是否在页面上，并尝试向其中添加 9999 的 z-index 样式。这将迫使它站在一切的前面。如果出现模态框，则可能存在分层问题。

我已经添加了所有内容，我知道我已经添加了，因为我还有其他可以正常工作的引导功能。我将 z-index 从 1050 更改为 9999，但仍然没有出现

当我查看开发工具时，模态的样式显然都被划掉了，我如何确定样式被覆盖的位置？

【参考方案1】：

我建议检查您的项目是否使用 BS jQuery 模态插件。如文档中所述：

Modal 是用 HTML、CSS 和 javascript 构建的

你确定你有链接到按钮的 JS 代码吗？基本上类似于https://getbootstrap.com/docs/4.4/components/modal/#via-javascript。您是如何在项目中安装 BS 的？