Question

Bootstrap Modal - 它看起来非常漂亮和漂亮，我见过很棒的解决方案......但我需要帮助。

以下任务：我即将使用Bootstrap 3.0作为电子商务模板。因此，我将使用与产品照片相同的javascript灯箱完成许多“弹出窗口”。现在我想使用模态框，但是重新使用它们时遇到了麻烦。

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

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

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

Bootstrap模式供多种用途

1 个答案: