首页 文章

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

提问于
浏览 次
0

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

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

我的相关代码是：

触发：

<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”>
它的工作原理 .

jquery html css twitter-bootstrap bootstrap-modal

2 回答

  • 0

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

    复制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> 标签上方的页面底部 . 这有助于防止任何潜在的冲突 .

    回复于
  • 0

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

    {<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> 那么其他一切，希望它有所帮助

    回复于

相关问题