A simple extensible modal used primarily for confirm dialogs.

confirmmodal.js

(function ($) {
    $.fn.confirmModal = function (opts) {
        var body = $('body');
        var unique = Math.floor(Math.random() * (1e+9));
        var clickedOutside = true;
        // the innerFrameId allows a body of markup to be inserted w append in lieu of message
        // use detach first if the nodes are already in the dom
        var defaultOptions = {
            confirmModalId: "confirmModal" + unique,
            confirmInnerFrameId: "confirmInnerFrame" + unique,
            confirmTitle: 'Please confirm',
            confirmMessage: 'Are you sure you want to perform this action ?',
            confirmOk: 'Yes',
            confirmCancel: 'Cancel',
            confirmOmitCancel: false,
            confirmDirection: 'rtl',
            confirmStyle: 'primary',
            confirmCallback: defaultCallback,
            confirmCancelCallback: defaultCallback,
            confirmDismiss: true,
            confirmDismissOnCancel: true,
            confirmAutoOpen: false,
            confirmHiddenCallback: defaultCallback,
            confirmClickedOutsideCallback: defaultCallback
        };
        var options = $.extend(defaultOptions, opts);

        var headModalTemplate =
            '<div class="modal fade" id="#modalId#" tabindex="-1" role="dialog" aria-labelledby="#AriaLabel#" aria-hidden="true">' +
                '<div class="modal-dialog" role="document" style="display: table">' +
                    '<div class="modal-content">' +
                        '<div class="modal-header">' +
                            '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
                            '<h4 id="#AriaLabel#" class="modal-title">#Heading#</h4>' +
                        '</div>' +
                        '<div id="#innerFrameId#" class="modal-body">' +
                            '<p>#Body#</p>' +
                        '</div>' +
                        '<div class="modal-footer">' +
                        '#buttonTemplate#' +
                        '</div>' +
                    '</div>' +
                '</div>' +
            '</div>'
        ;

        return this.each(function (index) {
            var confirmLink = $(this);
            var targetData = confirmLink.data();

            var currentOptions = $.extend(options, targetData);

            var modalId = options.confirmModalId;
            var innerFrameId = options.confirmInnerFrameId;
            var modalTemplate = headModalTemplate;
            var buttonOk = '<button class="btn btn-#Style#" data-dismiss="ok">#Ok#</button>';
            var buttonCancel = (options.confirmOmitCancel) ? ''
                                : '<button class="btn btn-default" data-dismiss="modal">#Cancel#</button>';
            var buttonTemplate =  buttonCancel + buttonOk;
            if (options.confirmDirection == 'ltr') {
                buttonTemplate = buttonOk + buttonCancel;
            }

            var confirmTitle = options.confirmTitle;
            if (typeof options.confirmTitle == 'function') {
                confirmTitle = options.confirmTitle.call(this);
            }

            var confirmMessage = options.confirmMessage;
            if (typeof options.confirmMessage == 'function') {
                confirmMessage = options.confirmMessage.call(this);
            }

            modalTemplate = modalTemplate.
                replace('#buttonTemplate#', buttonTemplate).
                replace('#modalId#', modalId).
                replace('#innerFrameId#', innerFrameId).
                replace('#AriaLabel#', confirmTitle).
                replace('#Heading#', confirmTitle).
                replace('#Body#', confirmMessage).
                replace('#Ok#', options.confirmOk).
                replace('#Cancel#', options.confirmCancel).
                replace('#Style#', options.confirmStyle)
            ;

            body.append(modalTemplate);

            var confirmModal = $('#' + modalId);

            confirmLink.on('click', function (modalEvent) {
                modalEvent.preventDefault();
                confirmModal.modal('show');
            });

            $('button[data-dismiss="ok"]', confirmModal).on('click', function (event) {
                clickedOutside = false;
                if (options.confirmDismiss) {
                    confirmModal.modal('hide');
                }
                options.confirmCallback(confirmLink, confirmModal);
            });

            $('button[data-dismiss="modal"]', confirmModal).on('click', function (event) {
                clickedOutside = false;
                if (options.confirmDismissOnCancel) {

                    confirmModal.modal('hide');
                }
                options.confirmCancelCallback(confirmLink, confirmModal);
            });

            if (options.confirmAutoOpen) {
                confirmModal.modal('show');
            }

            $('#' + modalId).on('hidden.bs.modal', function () {
                var thisModal = $('#' + options.confirmModalId);
                var modal = thisModal[0];
                if (clickedOutside)
                    options.confirmClickedOutsideCallback(this, modal);
                options.confirmHiddenCallback(this, modal);
                $(modal).removeData('bs.modal');
                $(modal).remove();
            });
        });

        function defaultCallback(target, modal) {
            //window.location = $(target).attr('href');
        }
    };
})(jQuery);