Question

因此，我尝试添加引导模式，以在我的投资组合页面上显示有关我项目的某些详细信息。

但由于某种原因，模态并没有显示任何东西。当我检查元素时，它覆盖了整个页面。

我的相关代码是：

触发器：

<a class="projectbox" href="#" data-toggle="modal" data-target=".bs-example-modal-lg">

模态：

                    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                          ...
                        </div>
                    </div>
                </div>

可以在此处找到所发生情况的实时预览（点击android徽标）：

Live Preview (Click on android logo)

如果缺少任何信息，请告诉我。

另外，我在bootstrap js之前已经包含了JQuery：

<!-- Import js -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

上面的代码位于索引页的底部。

代码可以在这里找到：

Source code

我的问题似乎是没有.in课程模态。我的第一行模态现在看起来像这样：
<div class="modal fade in bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
它有效。

Answer 1

当你应该添加一个.show类时，你的模态似乎会添加一个.in类。

复制bootstrap示例并不是最好的，因为它们往往被剥离版本......他们假设您复制了该部分顶部的默认示例。如果您要复制特定版本，例如大型模式，那么我建议您使用默认模式并根据“大型”模式进行相应修改。例。

<div class="modal fade in bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" style="display: block;">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
    ...
    </div>
  </div>
</div>

我还建议将模态代码移到</body>标记上方但<script>标记上方的页面底部。这有助于防止任何潜在的冲突。

Answer 2

嘿，我认为问题是因为你的触发部分

{<a class="projectbox" href="#" data-toggle="modal" data-target=".bs-example-modal-lg">}

我已经查看了要点并且你捕获了很多图像和东西（从而使它捕获整个页面），并且你缺少给出一个明确的元素，应该点击以打开模态，一个更好的版本是 -

<button  class="projectbox btn" data-toggle="modal" data-target=".bs-example-modal-lg" >Modal Button</button>

关闭按钮后的其他所有内容

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                      ...
                    </div>
                </div>
            </div>

这是标准但如果你想把其中一张图片作为触发元素（就像在我看来那样）那么 <a class="projectbox" data-toggle="modal" data-target=".bs-example-modal-lg"><img src=""> </a>然后其他一切，希望它有所帮助

Bootstrap模式未显示但似乎已打开

2 个答案: