Bootstrap modal for multiple use

Question

Bootstrap Modal - it looks pretty nice and nifty and I've seen great solutions... but I need help.

Following task: I am about to use Bootstrap 3.0 for an eCommerce template. So I'll have a lot of "popups" which were done before with a javascript lightbox same as the product photos. Now I want to use the modal boxes, but I have trouble with re-using them.

There will be a need of several ones with different content (product photos, shipping costs, login, and more), I've read about reusing the modal box and was finally able to change at least the content somehow but never header or footer. For example the shipping information are coming from a php page and i don't want to get this on every page loaded.

Is there a (simple?) way of loading contents into a modal box and still using it for different tasks? I have no problem with placing one empty modal div at the bottom of the page, but can't have 4 or more modals loaded "for good" every time? Please give me an advise.

Answer 1

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