I decided I wanted to have a script that I could use if I needed to insert custom Bootstrap modals. I didn't want to have the empty static Bootstrap modal HTML sat in the bottom of every page if it wouldn't always be utilized.

So, this may be the wrong way of going about it, but this was my attempt. I create a variable which is the modal 'shell' html. Then, when I click a device item, this is appended to the body. I have some content then cloned and appended to header and body of the modal. All working fine. But I can't remove the modal once it's closed. This is something to do with the fact that I insert the HTML via JS, as the remove works fine if the Modal shell HTML exists statically in my HTML page.

HTML:

<ul>
    <li class="span4 device">
        <div class="inner">
            <h3>Device 4</h3>
            <div class="device-product">
                <img class="device-image" src="img/placeholder-holding-image.png" alt="Holding Image" />
                <a href="#" class="hide">Troubleshoot this item</a>
                <a href="#" class="hide">How to use this product</a>
            </div>
            <div class="device-details">
                <div class="control-group">
                    <label class="control-label">Device Type:</label>
                    <span class="field">Really cool device</span>
                </div>
                <!-- Small amount of hidden additional information -->
                <div class="control-group hide">
                    <label class="control-label">Device ID:</label>
                    <span class="field">123456</span>
                </div>
            </div>
        </div>
    </li>
</ul>

jQuery:

var customModal = $(
    '<div class="custom-modal modal hid
jquery twitter-bootstrap
Edit
Report