Javascript 在bootstrap 2.3模式中动态加载内容

我正在使用twitter引导模式进行一些修改，并试图在模式窗口中实现动态图像加载。此外，当某些图像加载时，我希望能够在图像之间滑动。有人能帮我做这个吗

结构如下：

<!-- Image trigger -->
<div class="item">
    <a data-toggle="modal" href="#myModal" class="modal-trigger">
        <img src="img/7.jpg" alt="">
     </a>
</div>

<!-- Modal window -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<!-- it makes empty spaces clickable -->
<div type="button" class="close" data-dismiss="modal" aria-hidden="true">&nbsp;</div>

<img data-dismiss="modal" aria-hidden="true" src="http://placehold.it/800x670" class="image" alt="" data-target="#myModal"></div>

---

您必须为每个任务编写多个方法/函数

var yourApp = window.yourApp || {};

yourApp.initModal = function (options) {
   $('a.js-modal').on('click' function (event) {
      $('#myModal').modal(options);
      event.preventDefault();
   }); 
};

yourApp.loadModalContent = function () {
   var content = $("#modalContent").html();

   if (content.length) {
       $('#myModal').html(content);
   }
};

yourApp.initCarouselSwipe = function (options) {
   $("#myCarousel")
      .carousel(options)
      .swiperight(function() {  
          $(this).carousel('prev');  
      }) 
      .swipeleft(function() {  
          $(this).carousel('next');  
      });
};

$(function() {
    yourApp.initModal({
        show: function () {
             yourApp.loadModalContent();
             yourApp.initCarouselSwipe();
        }
    });
});

一种方法是使用回调打开模式，该回调确实加载动态内容

内容加载器应该检索模式的选择器并将内容放入

最后但并非最不重要的是，我们必须初始化滑动事件和旋转木马

---

模态中的html应该是什么样子？现在它正在加载静态图像，如上面的示例所示。yourApp.loadModalContent可以从AJAX调用（最好）或从DOM节点（不是一个好的实践）返回html，但不幸的是，它不起作用。我刚刚将您的代码添加到我上面提到的示例中，但仍然发生了任何事情。在模态窗口中，我删除了静态图像加载并留下src=“”，以便用ajax填充该空间。它不起作用，因为我只是给了你一个骨架。。。你必须自己完成这些方法。这个平台是关于提问/提问，不让其他人做你的工作…：-）哦。：）Sry我是js的noob。无论如何，我会再试一次。

var yourApp = window.yourApp || {};

yourApp.initModal = function (options) {
   $('a.js-modal').on('click' function (event) {
      $('#myModal').modal(options);
      event.preventDefault();
   }); 
};

yourApp.loadModalContent = function () {
   var content = $("#modalContent").html();

   if (content.length) {
       $('#myModal').html(content);
   }
};

yourApp.initCarouselSwipe = function (options) {
   $("#myCarousel")
      .carousel(options)
      .swiperight(function() {  
          $(this).carousel('prev');  
      }) 
      .swipeleft(function() {  
          $(this).carousel('next');  
      });
};

$(function() {
    yourApp.initModal({
        show: function () {
             yourApp.loadModalContent();
             yourApp.initCarouselSwipe();
        }
    });
});