# VBForums CodeBank > CodeBank - JavaScript >  [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.

----------

