Question

我正在使用twitter bootstrap模式进行一些修改，我正在尝试在模态窗口中实现动态图像加载。此外，当加载某个图像时，我希望能够在图像之间滑动。任何人都可以帮我这个吗？

这是结构：

<!-- 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>

这是javascript for swipe功能：

$(document).ready(function() {  
                    // Swipe feature
                     $("#myCarousel").swiperight(function() {  
                      $("#myCarousel").carousel('prev');  
                    });  
                     $("#myCarousel").swipeleft(function() {  
                      $("#myCarousel").carousel('next');  
                     });

Answer 1

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

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();
        }
    });
});

使用回调加载动态内容
内容加载器应检索模式的选择器并将内容放入
最后但并非最不重要的是，我们必须初始化滑动事件和轮播

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

1 个答案: