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”。 '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;
    });
});

或

您可以使用“on”函数来分配点击处理程序，该处理程序会将其添加到分配了处理程序后添加的任何dom中。只记得将它分配给期待的父母。对于例如：

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

    });

Answer 2

更改

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

    });

要：

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

    });

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

绑定事件

Answer 3

这是因为淡入淡出的。它将不透明度：0添加到模态

Bootstrap模态不会显示

3 个答案: