Bootstrap Confirmation Modal

Description
A simple jQuery solution for displaying and handling Bootstrap confirmation modals on the fly.

Repository
https://github.com/dday9/Bootstrap-Confirmation-Modal

Source (minified)

Code:

---

var confirmationDOM = function (configuration) { configuration = configuration || {}; configuration.title = configuration.title || ""; configuration.closeIcon = configuration.closeIcon || false; configuration.message = configuration.message || ""; configuration.no = configuration.no || {}; configuration.no.class = (configuration.no.class || "btn btn-secondary").trim() + " confirmation-no"; configuration.no.text = configuration.no.text || "Cancel"; configuration.yes = configuration.yes || {}; configuration.yes.class = (configuration.yes.class || "btn btn-primary").trim() + " confirmation-yes"; configuration.yes.text = configuration.yes.text || "Ok";var modal = $("<div />", { class: "modal", id: "confirmation-modal-" + new Date().getTime() }); modal.attr("tabindex", "-1"); var modalDialog = $("<div />", { class: "modal-dialog" }); var modalContent = $("<div />", { class: "modal-content" }); var modalBody = $("<div />", { class: "modal-body" }); var modalBodyText = $("<p />", { text: configuration.message }); modalBody.append(modalBodyText); var modalFooter = $("<div />", { class: "modal-footer" }); var modalFooterNoButton = $("<button />", { class: configuration.no.class, text: configuration.no.text }); var modalFooterYesButton = $("<button />", { class: configuration.yes.class, text: configuration.yes.text }); modalFooter.append(modalFooterNoButton, modalFooterYesButton); modalContent.append(modalBody); modalContent.append(modalFooter); if (configuration.title || configuration.closeIcon) { var modalHeader = $("<div />", { class: "modal-header" }); var modalTitle = $("<h5 />", { class: "modal-title", text: configuration.title }); modalHeader.append(modalTitle); if (configuration.closeIcon) { var closeText = $("<span />", { html: "&times;" }); closeText.attr("aria-hidden", "true"); var closeButton = $("<button />", { type: "button", class: "close confirmation-no" }); closeButton.append(closeText); modalHeader.append(closeButton); } modalContent.prepend(modalHeader); } modalDialog.append(modalContent); modal.append(modalDialog); return modal; }; var bootstrapConfirmation = function (params) { params = params || {}; params.yesCallBack = params.yesCallBack || function () {}; params.noCallBack = params.noCallBack || function () {}; var modal = confirmationDOM(params.config); var id = "#" + modal.prop("id"); $("body").append(modal); $("body").on("hidden.bs.modal", id, function (e) { if (!$(id).attr("data-action")) { params.noCallBack(); } $(id).modal("dispose"); $(id).remove(); }); $("body").on("click", id + " .confirmation-yes", function (e) { params.yesCallBack(); $(id).attr("data-action", 1); $(id).modal("hide"); }); $("body").on("click", id + " .confirmation-no", function (e) { params.noCallBack(); $(id).attr("data-action", 1); $(id).modal("hide"); }); $(id).modal("show"); };

---

Usage
The simplest way to use this is to simply call bootstrapConfirmation without any parameters. This would display a blank confirmation modal:

Code:

---

bootstrapConfirmation();

---

Optionally (and more practically) you can pass in an object parameter with various properties set to customize the display of the modal:

Code:

---

bootstrapConfirmation({
    yesCallBack: function () {
        console.log('yes');
    },
    noCallBack: function () {
        console.log('no');
    },
    config: {
        closeIcon: true,
        message: 'This is an example.',
        title: 'Example',
        no: {
            class: 'btn btn-danger',
            text: 'No'
        },
        yes: {
            class: 'btn btn-success',
            text: 'Yes'
        }
    }
});

---

Demo
Live Example