5

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

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

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

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

4

1 回答 1

0

so @Ashish says change the content of your modal before you show it, see 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('');
});
于 2013-09-05T23:54:23.540 回答