[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]

Both v4 and v5 had some refactoring done. In both, the methods were split up to help improve readability. In v5, the object was replaced with a class that uses private and static methods.

Here are the v4 changes:

const confirmationModal = {};

confirmationModal.buildDom = configuration => {
	configuration = confirmationModal.setDefaultConfiguration(configuration);

	const modal = confirmationModal.buildModalDom(configuration);
	return modal;
};

confirmationModal.setDefaultConfiguration = 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';

	return configuration;
};

confirmationModal.buildModalDom = configuration => {
	const modal = document.createElement('div');
	modal.classList.add('modal');
	modal.setAttribute('tabindex', '-1');

	const modalDialog = confirmationModal.buildModalDialogDom(configuration);
	modal.appendChild(modalDialog);

	return modal;
};

confirmationModal.buildModalDialogDom = configuration => {
	const modalDialog = document.createElement('div');
	modalDialog.classList.add('modal-dialog');

	const modalContent = confirmationModal.buildModalContentDom(configuration);
	modalDialog.appendChild(modalContent);

	return modalDialog;
};

confirmationModal.buildModalContentDom = configuration => {
	const modalContent = document.createElement('div');
	modalContent.classList.add('modal-content');

	if (configuration.title || configuration.closeIcon) {
		const modalHeader = confirmationModal.buildModalHeaderDom(configuration);
		modalContent.appendChild(modalHeader);
	}

	const modalBody = confirmationModal.buildModalBodyDom(configuration);
	modalContent.appendChild(modalBody);

	const modalFooter = confirmationModal.buildModalFooterDom(configuration);
	modalContent.appendChild(modalFooter);

	return modalContent;
};

confirmationModal.buildModalBodyDom = configuration => {
	const modalBody = document.createElement('div');
	modalBody.classList.add('modal-body');

	const modalBodyText = confirmationModal.buildModalBodyTextDom(configuration);
	modalBody.appendChild(modalBodyText);
	
	return modalBody;
};

confirmationModal.buildModalBodyTextDom = configuration => {
	const modalBodyText = document.createElement('p');
	modalBodyText.textContent = configuration.message;

	return modalBodyText;
};

confirmationModal.buildModalFooterDom = configuration => {
	const modalFooter = document.createElement('div');
	modalFooter.classList.add('modal-footer');

	const modalFooterNoButton = confirmationModal.buildModalFooterNoButtonDom(configuration);
	modalFooter.appendChild(modalFooterNoButton);

	const modalFooterYesButton = confirmationModal.buildModalFooterYesButtonDom(configuration);
	modalFooter.appendChild(modalFooterYesButton);

	return modalFooter;
};

confirmationModal.buildModalFooterNoButtonDom = configuration => {
	const modalFooterNoButton = document.createElement('button');
	modalFooterNoButton.setAttribute('class', configuration.no.class);
	modalFooterNoButton.textContent = configuration.no.text;
	modalFooterNoButton.dataset.dismiss = 'modal';
	
	return modalFooterNoButton;
};

confirmationModal.buildModalFooterYesButtonDom = configuration => {
	const modalFooterYesButton = document.createElement('button');
	modalFooterYesButton.setAttribute('class', configuration.yes.class);
	modalFooterYesButton.textContent = configuration.yes.text;
	
	return modalFooterYesButton;
};

confirmationModal.buildModalHeaderDom = configuration => {
	const modalHeader = document.createElement('div');
	modalHeader.classList.add('modal-header');

	const modalTitle = confirmationModal.buildModalTitleDom(configuration);
	modalHeader.appendChild(modalTitle);

	if (configuration.closeIcon) {
		const closeButton = confirmationModal.buildModalCloseDom();
		modalHeader.appendChild(closeButton);
	}

	return modalHeader;
};

confirmationModal.buildModalTitleDom = configuration => {
	const modalTitle = document.createElement('h5');
	modalTitle.classList.add('modal-title');
	modalTitle.textContent = configuration.title;
	
	return modalTitle;
};

confirmationModal.buildModalCloseDom = () => {
	const closeButton = document.createElement('button');
	closeButton.classList.add('close');
	closeButton.dataset.dismiss = 'modal';

	const closeText = confirmationModal.buildModalCloseTextDom();
	closeButton.appendChild(closeText);

	return closeButton;
};

confirmationModal.buildModalCloseTextDom = () => {
	const closeText = document.createElement('span');
	closeText.setAttribute('aria-hidden', 'true');
	closeText.innerHTML = '×';

	return closeText;
};

confirmationModal.show = params => {
	// optionally setup the default parameters
	params = params || {};

	// build the modal DOM passing the configuration and get a reference to the buttons
	const modalDom = confirmationModal.buildDom(params);
	const buttonConfirmationYes = modalDom.querySelector('.confirmation-yes');

	// append the modal DOM to the body
	document.body.appendChild(modalDom);
	const modalPromise = new Promise((resolve, reject) => {
		// show the modal
		$(modalDom).modal('show');

		// handle the yes click event
		buttonConfirmationYes.addEventListener('click', () => {
			resolve();
			$(modalDom).modal('hide');
		});

		// handle the dismiss events
		$(modalDom).on('hidden.bs.modal', () => {
            reject();
        });
	});

	return modalPromise;
};

Here are the v5 changes:

class confirmationModal {

	static #buildDom(configuration) {
		configuration = confirmationModal.#setDefaultConfiguration(configuration);
	
		const modal = confirmationModal.#buildModalDom(configuration);
		return modal;
	}

	static #setDefaultConfiguration(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';
	
		return configuration;
	}

	static #buildModalDom(configuration) {
		const modal = document.createElement('div');
		modal.classList.add('modal');
		modal.setAttribute('tabindex', '-1');
	
		const modalDialog = confirmationModal.#buildModalDialogDom(configuration);
		modal.appendChild(modalDialog);
	
		return modal;
	}

	static #buildModalDialogDom(configuration) {
		const modalDialog = document.createElement('div');
		modalDialog.classList.add('modal-dialog');
	
		const modalContent = confirmationModal.#buildModalContentDom(configuration);
		modalDialog.appendChild(modalContent);
	
		return modalDialog;
	}

	static #buildModalContentDom(configuration) {
		const modalContent = document.createElement('div');
		modalContent.classList.add('modal-content');
	
		if (configuration.title || configuration.closeIcon) {
			const modalHeader = confirmationModal.#buildModalHeaderDom(configuration);
			modalContent.appendChild(modalHeader);
		}
	
		const modalBody = confirmationModal.#buildModalBodyDom(configuration);
		modalContent.appendChild(modalBody);
	
		const modalFooter = confirmationModal.#buildModalFooterDom(configuration);
		modalContent.appendChild(modalFooter);
	
		return modalContent;
	}

	static #buildModalBodyDom(configuration) {
		const modalBody = document.createElement('div');
		modalBody.classList.add('modal-body');
	
		const modalBodyText = confirmationModal.#buildModalBodyTextDom(configuration);
		modalBody.appendChild(modalBodyText);
		
		return modalBody;
	}

	static #buildModalBodyTextDom(configuration) {
		const modalBodyText = document.createElement('p');
		modalBodyText.textContent = configuration.message;
	
		return modalBodyText;
	}

	static #buildModalFooterDom(configuration) {
		const modalFooter = document.createElement('div');
		modalFooter.classList.add('modal-footer');
	
		const modalFooterNoButton = confirmationModal.#buildModalFooterNoButtonDom(configuration);
		modalFooter.appendChild(modalFooterNoButton);
	
		const modalFooterYesButton = confirmationModal.#buildModalFooterYesButtonDom(configuration);
		modalFooter.appendChild(modalFooterYesButton);
	
		return modalFooter;
	}

	static #buildModalFooterNoButtonDom(configuration) {
		const modalFooterNoButton = document.createElement('button');
		modalFooterNoButton.setAttribute('class', configuration.no.class);
		modalFooterNoButton.textContent = configuration.no.text;
		modalFooterNoButton.setAttribute('data-bs-dismiss', 'modal');
		
		return modalFooterNoButton;
	}

	static #buildModalFooterYesButtonDom(configuration) {
		const modalFooterYesButton = document.createElement('button');
		modalFooterYesButton.setAttribute('class', configuration.yes.class);
		modalFooterYesButton.textContent = configuration.yes.text;
		
		return modalFooterYesButton;
	}

	static #buildModalHeaderDom(configuration) {
		const modalHeader = document.createElement('div');
		modalHeader.classList.add('modal-header');
	
		const modalTitle = confirmationModal.#buildModalTitleDom(configuration);
		modalHeader.appendChild(modalTitle);
	
		if (configuration.closeIcon) {
			const closeButton = confirmationModal.#buildModalCloseDom();
			modalHeader.appendChild(closeButton);
		}
	
		return modalHeader;
	}

	static #buildModalTitleDom(configuration) {
		const modalTitle = document.createElement('h5');
		modalTitle.classList.add('modal-title');
		modalTitle.textContent = configuration.title;
		
		return modalTitle;
	}

	static #buildModalCloseDom() {
		const closeButton = document.createElement('button');
		closeButton.classList.add('btn-close');
		closeButton.setAttribute('data-bs-dismiss', 'modal');
		closeButton.setAttribute('aria-label', 'close');
	
		return closeButton;
	}

	static show(params) {
		// optionally setup the default parameters
		params = params || {};
	
		// build the modal DOM passing the configuration and get a reference to the buttons
		const modalDom = confirmationModal.#buildDom(params);
		const buttonConfirmationYes = modalDom.querySelector('.confirmation-yes');
	
		// append the modal DOM to the body
		document.body.appendChild(modalDom);
		const modalPromise = new Promise((resolve, reject) => {
			// show the modal
			const bsModal = new bootstrap.Modal(modalDom);
			bsModal.show();
	
			// handle the yes click event
			buttonConfirmationYes.addEventListener('click', () => {
				resolve();
				bsModal.hide();
			});
	
			// handle the dismiss events
			modalDom.addEventListener('hidden.bs.modal', () => {
				reject();
			});
		});
	
		return modalPromise;
	}
}