BS3: Dynamic Modal

by Craig Boland

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<ul>
    <li class="span4 device">
        <div class="inner">
            <div class="control-group">
                <label class="control-label">Device Type</label> <span class="field">Really cool device</span>
            </div>
            <div class="control-group hide">
                <label class="control-label">Device ID</label> <span class="field">123456</span>
            </div>
        </div> <a class="details" data-toggle="modal" href="#product-details">View details</a>
    </li>
</ul>

JavaScript

// Dynamic Modal works in BS 2.3.1, but not 3.3.4 (this fiddle's version).

// Original Source (BS 2.3.1): http://www.bootply.com/dr4q2u3WQa

var customModal = $('<div class="custom-modal modal hide fade" tabindex="-1" role="dialog" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal">Close</button></div></div>');

$('.device').click(function () {
    $('body').append(customModal);
    $(this).find($('h3')).clone().appendTo('.custom-modal .modal-header');
    $(this).find('.device-product, .device-details').clone().appendTo('.custom-modal .modal-body');
    $('.custom-modal .hide').show();
    $('.custom-modal').modal();

    $('.custom-modal').on('hidden', function () {
        console.log("hidden");
        $('.custom-modal').remove();
    });
});