modal.js

"use strict";

var space = space || {};

// For programatically creating and deleting the bootstrap modal.
space.modal = function() {
    var modalSelector = '#dynamic-modal';
    var $modal = null;
    
    var createModalHtml = function(data) {
        var html = '<div class="modal fade" id="dynamic-modal" tabindex="-1" role="dialog" aria-labelledby="dynamic-modal" aria-hidden="true">    <div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
        html += data.header;
        html += '</div><div class="modal-body">';
        html += data.body;

        if (typeof data.footer !== 'undefined') {
          html += '</div><div class="modal-footer">';
          html += data.footer;
          html += '</div>';
        }

        html += '</div></div></div>';
        
        return html;
    };

    // Resets the local variable and deletes the element.
    var addHiddenEvent = function() {
        $modal.on('hidden.bs.modal', function() {
            $modal.remove();
            
            $modal = null;
        });
    };

    // Data:
    // {
    //     header: '',
    //     body: '',
    //     footer: '' // Optional
    // }
    var create = function(data) {
        // If the modal exists, first remove it before creating a new one.
        if ($modal != null) {
            remove(function() {
                create(data);
            });

            return;
        }
        
        var html = createModalHtml(data);
        
        $('body').append(html);

        $modal = $(modalSelector);

        $modal.modal('show');

        addHiddenEvent();
    };

    var remove = function(doneCallback) {
        if (typeof doneCallback !== 'undefined') {
            $modal.on('hidden.bs.modal', function() {
                doneCallback();
            });
        }

        $modal.modal('hide');
    };

    return {
        // Create the modal.
        create: create,
        // Remove the modal.
        remove: remove
    };
}();

ordinary.html

<!--
    Standard Bootstrap usage.
    http://getbootstrap.com/javascript/#live-demo
-->
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="dynamic-modal" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h1>The header</h1>
            </div>
            <div class="modal-body">
                <p>The text!</p>
            </div>
            <div class="modal-footer">
                <button>Submit</button>
            </div>
        </div>
    </div>
</div>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal">
  Launch modal
</button>

using.js

// Create the modal.
space.modal.create({
    header: '<h1>The header</h1>',
    body: '<p>The text!</p>',
    // footer: '<button>Submit</button>' //optional
});

// Removing the modal. Callback optional.
space.modal.remove(function() {
    console.log('modal removed');
});