引导模式不会显示答案

【问题标题】：Bootstrap modal won't show引导模式不会显示
【发布时间】：2015-05-09 21:10:04
【问题描述】：

我正在尝试让引导模式工作。在 index.php 中，我有一些链接可以加载页面 PageOne.php 和 PageTwo.php。

在 PageOne.php 中，我尝试使用 #LinkToModal 调用模式，但模式不会显示。我正在使用 Chrome，当点击按钮时，我什至看不到控制台中的某些内容发生了变化。

这是我的代码： index.php

  <html>
    <head>
        <!-- Javascript -->
        <script src="inc/bootstrap-assets/js/jquery-1.10.2.js"></script>
        <script src="inc/bootstrap-assets/js/bootstrap.js"></script>

        <script src="inc/js/functions.js"></script>


    </head>
    <body>

        <h2>Home</h2>

        <a href="" id="LinkToPageOne">Link To Page One</a>
        <a href="" id="LinkToPageTwo">Link To Page Two</a>
        <div id="Content">something</div>   

    </body>


<!-- BOOTSTRAP SCRIPTS -->
</html>

PageOne.php

<div id="PageOne">
    <button id="LinkToModal" type="button" class="btn btn-primary" data-toggle="modal" data-target="#Modal">Large modal</button>

</div>

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

functions.js

   $(document).ready(function () {
    $("#LinkToPageOne").click(function () {
        $("#Content").load("inc/content/PageOne.php #PageOne");
        return false;
    });
    $("#LinkToPageTwo").click(function () {
        $("#Content").load("inc/content/PageTwo.php");
        return false;
    });

    $("#LinkToModal").click(function(){
            $("#Modal").modal("show");

    });
});

【问题讨论】：

标签： javascript jquery twitter-bootstrap twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

您的问题是您将点击处理程序分配给“#LinkToModal”太快了，而您的页面甚至还没有加载。 “加载”函数通过 AJAX 加载“内容”div 中的 html。所以你应该在加载后分配点击处理程序。 'load' 函数给你一个回调，你可以在其中添加这个处理程序。

$(document).ready(function () {
    $("#LinkToPageOne").click(function () {
        $("#Content").load("inc/content/PageOne.php #PageOne",function(){
              $("#LinkToModal").click(function(){
                 $("#Modal").modal("show");

              });
        });
        return false;
    });
});

或

您可以使用 'on' 函数来分配点击处理程序，这会将其添加到分配处理程序后添加的任何 dom。请记住将其分配给预期的父母。例如：

$("#Content").on('click','#LinkToModal',function(){
            $("#Modal").modal("show");

    });

【讨论】：

虽然解释听起来很合理，但两种解决方案都不起作用。 chrome 工具栏控制台中也没有模式和活动。
您是否进行了调试以检查至少点击处理程序是否已附加？模态不显示可能是由于其他问题，可以调试。
@Shaunak ，是的，我正在通过在我调用模态的地方放置一个 alert() 进行调试。警报按预期工作，但仍然没有模式。
好吧，很酷.. 所以我们现在知道您的处理程序未连接的问题现已解决。至于为什么模态不显示，可能是错误接线引导的结果。我建议，将模态 HTML 直接放在页面上，并尝试通过全局 javascript 调用模态，看看是否有效....

【解决方案2】：

改变

$("#LinkToModal").click(function(){
            $("#Modal").modal("show");

    });

收件人：

$("body").on('click','#LinkToModal',function(){
            $("#Modal").modal("show");

    });

因为您正在加载 HTML ajax，所以您需要使用 On 绑定事件

【讨论】：

您的意思是“...on('click', '#LinkToModal'...”吗？
仍然没有变化，它不会显示模式，我在 chrome 控制台中看不到任何有关它的信息。
@Joop 尝试在 click 事件处理程序中放置一个断点，可以吗？或者你在chrome中找不到脚本？
@AmrElgarhy 模态应该执行的位置我放入了一个警报（），以查看它是否与模态或我放入函数的方式有关。原来它是模态的，因为当模态应该是时，警报框会显示。所以该功能有效，但它没有显示我的模态......

【解决方案3】：

这是因为淡入淡出类。它将 opacity:0 添加到模态

【讨论】：