多次使用的引导模式

Question

Bootstrap Modal - 它看起来非常漂亮和漂亮，我已经看到了很好的解决方案......但我需要帮助。

以下任务：我即将使用 Bootstrap 3.0 作为电子商务模板。所以我会有很多“弹出窗口”，这是之前使用与产品照片相同的 javascript 灯箱完成的。现在我想使用模态框，但我无法重新使用它们。

需要几个具有不同内容（产品照片、运费、登录等）的内容，我已经阅读过有关重用模式框的内容，并且最终能够以某种方式至少更改内容，但不能更改页眉或页脚。例如，运输信息来自 php 页面，我不想在加载的每个页面上都获取此信息。

是否有一种（简单？）将内容加载到模式框中并仍然将其用于不同任务的方法？我可以在页面底部放置一个空模态 div 没有问题，但每次都不能“永久”加载 4 个或更多模态吗？请给我建议。

Answer 1

所以@Ashish 说在显示模态之前更改它的内容，请参阅http://jsfiddle.net/qV2CU/

html

<div class="container">
    <div class="row">
        <div class="col-sm-4"><button id="showvideo">Video</button></div>
        <div class="col-sm-4"><button id="showtext">Text</button></div>
        <div class="col-sm-4"><button id="showimage">Image</button></div>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"
                    aria-hidden="true">&times;</button>
            <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default"
                    data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-div -->

javascript

$('#showvideo').click(function(){
    $('#myModal .modal-title').html('Video');
    $('#myModal .modal-body').html('<iframe width="100%" height="315"
            src="//www.youtube.com/embed/_Wo9JxLIQYg" frameborder="0"
            allowfullscreen></iframe>');
    $('#myModal').modal('show');
});

$('#showtext').click(function(){
    $('#myModal .modal-title').html('Text');
    $('#myModal .modal-body').html('Praesent vitae lorem lectus. Praesent ut lectus id ipsum cursus rutrum sit amet eu elit. In accumsan pulvinar nisl euismod condimentum. Integer consequat, velit rhoncus vestibulum vehicula, turpis dolor euismod velit, eu volutpat eros ligula non ligula. Quisque non cursus nulla, eu viverra sem. Mauris dapibus id nulla at venenatis. Etiam viverra massa eu sem rhoncus commodo. Praesent at iaculis nulla. Aliquam feugiat neque dui, vitae condimentum massa accumsan sollicitudin. Integer pellentesque tempor augue, a euismod nunc posuere a. Mauris vulputate ante a lectus consectetur mattis. Donec tincidunt dictum vestibulum. ');
    $('#myModal').modal('show')
});

$('#showimage').click(function(){
    $('#myModal .modal-title').html('Image');
    $('#myModal .modal-body').html('<img src="http://dummyimage.com/300x150/000/ff">');
    $('#myModal').modal('show')
});

$('#myModal').on('hidden.bs.modal', function () {
    //See: http://stackoverflow.com/questions/13799377/twitter-bootstrap-modal-stop-youtube-video
    //let the movie stop
    $('#myModal .modal-body').html('');
});