在bootstrap 2.3 modal中动态加载内容

Question

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

这里是结构：

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

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

1. 之一打开一个回调模式，它加载动态内容
2. 内容加载程序是否应检索模式的选择，并把内容转换成
3. 最后但并非最不重要的，我们必须初始化滑动事件和旋转木马