Bootstrap 模态不显示

Question

我正在尝试让 bootstrap 模式正常工作。在 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");

    });
});

Answer 1

改变

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

    });

收件人：

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

    });

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

绑定事件

Answer 2

您的问题是您过早地将点击处理程序分配给“#LinkToModal”，而您的页面甚至还没有加载。 'load' 函数在 AJAX 上加载 "content" 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;
    });
});

or

您可以使用“on”函数分配点击处理程序，这会将其添加到分配处理程序后添加的任何 dom。请记住将它分配给期望的 parent。例如:

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

    });

Answer 3

是因为褪色class。它将 opacity:0 添加到模态

Bootstrap 模态不显示

Bootstrap modal won't show

javascript

jquery

twitter-bootstrap

bootstrap-modal

twitter-bootstrap-3