[jQuery] [JavaScript] Bootstrap Confirmation Modal

[dday9]

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

Demo
Fiddle: https://jsfiddle.net/7g4819yL/

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

Usage
Example 1:

bootstrapConfirmation();

Example 2:

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'
        }
    }
});

Source Code

var confirmationDOM = function (configuration) {
    // optionally setup the default 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";

    // build the required DOM
    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);

    // optionally build the header DOM
    if (configuration.title || configuration.closeIcon) {
        var modalHeader = $("<div />", { class: "modal-header" });
        var modalTitle = $("<h5 />", { class: "modal-title", text: configuration.title });
        modalHeader.append(modalTitle);

        // optionally build the close icon button
        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);
    }

    // finish building the DOM and return the modal
    modalDialog.append(modalContent);
    modal.append(modalDialog);
    return modal;
};
var bootstrapConfirmation = function (params) {
    // optionally setup the default parameters
    params = params || {};
    params.yesCallBack = params.yesCallBack || function () {};
    params.noCallBack = params.noCallBack || function () {};

    // build the modal DOM passing the configuration
    var modal = confirmationDOM(params.config);

    // append the modal DOM to the body
    var id = "#" + modal.prop("id");
    $("body").append(modal);

    // handle: modal hidden, yes click, and no click
    $("body").on("hidden.bs.modal", id, function (e) {
        if (!$(id).attr("data-action")) {
            // if the user clicks outside of the modal, causing it to close, assume "no"
            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");
    });

    // show the modal
    $(id).modal("show");
};

[dday9]

The repository has been updated to include a Bootstrap 5 version. This is the source code for V5:

var confirmationDOM = function (configuration) {
    // optionally setup the default 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";

    // build the required DOM
    var modal = document.createElement("div");
    modal.classList.add("modal");
    modal.id = "confirmation-modal-" + new Date().getTime();
    modal.setAttribute("tabindex", "-1");

    var modalDialog = document.createElement("div");
    modalDialog.classList.add("modal-dialog");

    var modalContent = document.createElement("div");
    modalContent.classList.add("modal-content");

    var modalBody = document.createElement("div");
    modalBody.classList.add("modal-body");

    var modalBodyText = document.createElement("p");
    modalBodyText.textContent = configuration.message;
    modalBody.appendChild(modalBodyText);

    var modalFooter = document.createElement("div");
    modalFooter.classList.add("modal-footer");

    var modalFooterNoButton = document.createElement("button");
    modalFooterNoButton.classList.add(...configuration.no.class.split(" "));
    modalFooterNoButton.textContent = configuration.no.text;
    modalFooterNoButton.setAttribute("data-bs-dismiss", "modal");

    var modalFooterYesButton = document.createElement("button");
    modalFooterYesButton.classList.add(...configuration.yes.class.split(" "));
    modalFooterYesButton.textContent = configuration.yes.text;
    modalFooterYesButton.setAttribute("data-bs-dismiss", "modal");

    modalFooter.appendChild(modalFooterNoButton);
    modalFooter.appendChild(modalFooterYesButton);
    modalContent.appendChild(modalBody);
    modalContent.appendChild(modalFooter);

    // optionally build the header DOM
    if (configuration.title || configuration.closeIcon) {
        var modalHeader = document.createElement("div");
        modalHeader.classList.add("modal-header");
        var modalTitle = document.createElement("h5");
        modalTitle.classList.add("modal-title");
        modalTitle.textContent = configuration.title;
        modalHeader.appendChild(modalTitle);

        // optionally build the close icon button
        if (configuration.closeIcon) {
            var closeButton = document.createElement("button");
            closeButton.classList.add("btn-close");
            closeButton.setAttribute("data-bs-dismiss", "modal");
            closeButton.setAttribute("aria-label", "close");
            modalHeader.appendChild(closeButton);
        }
        modalContent.prepend(modalHeader);
    }

    // finish building the DOM and return the modal
    modalDialog.appendChild(modalContent);
    modal.appendChild(modalDialog);
    return modal;
};

var bootstrapConfirmation = function (params) {
    // optionally setup the default parameters
    params = params || {};
    params.yesCallBack = params.yesCallBack || function () {};
    params.noCallBack = params.noCallBack || function () {};

    // build the modal DOM passing the configuration
    var modalDOM = confirmationDOM(params.config);

    // append the modal DOM to the body
    document.body.appendChild(modalDOM);

    // handle: modal hidden, yes click, and no click
    document.querySelector("body").addEventListener("click", function (event) {
        if (event.target.matches(".confirmation-no")) {
            params.noCallBack();
            modal.hide();
        } else if (event.target.matches(".confirmation-yes")) {
            params.yesCallBack();
            modal.hide();
        }
    });

    // show the modal
    var modal = new bootstrap.Modal(document.getElementById(modalDOM.id));
    modal.show();
};

The usage has not changed.

[dday9]

A bug fix has been implemented on the version 5 implementation to correct an issue where the callback would be executed as many times as the modal was opened:

const confirmationDOM = function (configuration) {
    // optionally setup the default 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';

    // build the required DOM
    const modal = document.createElement('div');
    modal.classList.add('modal');
    modal.id = 'confirmation-modal-' + new Date().getTime();
    modal.setAttribute('tabindex', '-1');

    const modalDialog = document.createElement('div');
    modalDialog.classList.add('modal-dialog');

    const modalContent = document.createElement('div');
    modalContent.classList.add('modal-content');

    const modalBody = document.createElement('div');
    modalBody.classList.add('modal-body');

    const modalBodyText = document.createElement('p');
    modalBodyText.textContent = configuration.message;
    modalBody.appendChild(modalBodyText);

    const modalFooter = document.createElement('div');
    modalFooter.classList.add('modal-footer');

    const modalFooterNoButton = document.createElement('button');
    modalFooterNoButton.classList.add(...configuration.no.class.split(' '));
    modalFooterNoButton.textContent = configuration.no.text;
    modalFooterNoButton.setAttribute('data-bs-dismiss', 'modal');

    const modalFooterYesButton = document.createElement('button');
    modalFooterYesButton.classList.add(...configuration.yes.class.split(' '));
    modalFooterYesButton.textContent = configuration.yes.text;
    modalFooterYesButton.setAttribute('data-bs-dismiss', 'modal');

    modalFooter.appendChild(modalFooterNoButton);
    modalFooter.appendChild(modalFooterYesButton);
    modalContent.appendChild(modalBody);
    modalContent.appendChild(modalFooter);

    // optionally build the header DOM
    if (configuration.title || configuration.closeIcon) {
        const modalHeader = document.createElement('div');
        modalHeader.classList.add('modal-header');

        const modalTitle = document.createElement('h5');
        modalTitle.classList.add('modal-title');
        modalTitle.textContent = configuration.title;
        modalHeader.appendChild(modalTitle);

        // optionally build the close icon button
        if (configuration.closeIcon) {
            const closeButton = document.createElement('button');
            closeButton.classList.add('btn-close');
            closeButton.setAttribute('data-bs-dismiss', 'modal');
            closeButton.setAttribute('aria-label', 'close');
            modalHeader.appendChild(closeButton);
        }
        modalContent.prepend(modalHeader);
    }

    // finish building the DOM and return the modal
    modalDialog.appendChild(modalContent);
    modal.appendChild(modalDialog);
    return modal;
};

const bootstrapConfirmation = function (params) {
    // optionally setup the default parameters
    params = params || {};
    params.yesCallBack = params.yesCallBack || function () {};
    params.noCallBack = params.noCallBack || function () {};

    // build the modal DOM passing the configuration
    const modalDOM = confirmationDOM(params.config);

    // append the modal DOM to the body
    document.body.appendChild(modalDOM);

    // handle: modal hidden, yes click, and no click
    const buttonConfirmationNo = modalDOM.querySelector('.confirmation-no');
    const buttonConfirmationYes = modalDOM.querySelector('.confirmation-yes');
    document.querySelector('body').addEventListener('click', function (event) {
        if (event.target === buttonConfirmationNo) {
            params.noCallBack();
            modal.hide();
        } else if (event.target === buttonConfirmationYes) {
            params.yesCallBack();
            modal.hide();
        }
    });

    // show the modal
    const modal = new bootstrap.Modal(document.getElementById(modalDOM.id));
    modal.show();
};

[dday9]

A change has been made to both version 4 and 5 to be promised based instead of callback based. This is the version 5 code, the version 4 code can be found on the GitHub repo:

const confirmationDOM = function (configuration) {
    // optionally setup the default 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';

    // build the required DOM
    const modal = document.createElement('div');
    modal.classList.add('modal');
    modal.id = 'confirmation-modal-' + new Date().getTime();
    modal.setAttribute('tabindex', '-1');

    const modalDialog = document.createElement('div');
    modalDialog.classList.add('modal-dialog');

    const modalContent = document.createElement('div');
    modalContent.classList.add('modal-content');

    const modalBody = document.createElement('div');
    modalBody.classList.add('modal-body');

    const modalBodyText = document.createElement('p');
    modalBodyText.textContent = configuration.message;
    modalBody.appendChild(modalBodyText);

    const modalFooter = document.createElement('div');
    modalFooter.classList.add('modal-footer');

    const modalFooterNoButton = document.createElement('button');
    modalFooterNoButton.classList.add(...configuration.no.class.split(' '));
    modalFooterNoButton.textContent = configuration.no.text;
    modalFooterNoButton.setAttribute('data-bs-dismiss', 'modal');

    const modalFooterYesButton = document.createElement('button');
    modalFooterYesButton.classList.add(...configuration.yes.class.split(' '));
    modalFooterYesButton.textContent = configuration.yes.text;
    modalFooterYesButton.setAttribute('data-bs-dismiss', 'modal');

    modalFooter.appendChild(modalFooterNoButton);
    modalFooter.appendChild(modalFooterYesButton);
    modalContent.appendChild(modalBody);
    modalContent.appendChild(modalFooter);

    // optionally build the header DOM
    if (configuration.title || configuration.closeIcon) {
        const modalHeader = document.createElement('div');
        modalHeader.classList.add('modal-header');

        const modalTitle = document.createElement('h5');
        modalTitle.classList.add('modal-title');
        modalTitle.textContent = configuration.title;
        modalHeader.appendChild(modalTitle);

        // optionally build the close icon button
        if (configuration.closeIcon) {
            const closeButton = document.createElement('button');
            closeButton.classList.add('btn-close');
            closeButton.setAttribute('data-bs-dismiss', 'modal');
            closeButton.setAttribute('aria-label', 'close');
            modalHeader.appendChild(closeButton);
        }
        modalContent.prepend(modalHeader);
    }

    // finish building the DOM and return the modal
    modalDialog.appendChild(modalContent);
    modal.appendChild(modalDialog);
    return modal;
};

const bootstrapConfirmation = function (params) {
    // optionally setup the default parameters
    params = params || {};
    const modalPromise = new Promise((resolve, reject) => {
      // build the modal DOM passing the configuration
      const modalDOM = confirmationDOM(params.config);

      // append the modal DOM to the body
      document.body.appendChild(modalDOM);

      // handle: modal hidden, yes click, and no click
      const buttonConfirmationNo = modalDOM.querySelector('.confirmation-no');
      const buttonConfirmationYes = modalDOM.querySelector('.confirmation-yes');
      document.querySelector('body').addEventListener('click', function (event) {
        if (event.target === buttonConfirmationNo) {
          reject()
          modal.hide();
        } else if (event.target === buttonConfirmationYes) {
          resolve();
          modal.hide();
        }
      });

      // show the modal
      const modal = new bootstrap.Modal(document.getElementById(modalDOM.id));
      modal.show();
    });

    return modalPromise;
};

[dday9]

No, you can create a new issue in the GitHub repo or just raise it here. Otherwise it will just go unresolved unless I figure out what you're referring to.