Results 1 to 2 of 2

Thread: [jQuery] [JavaScript] Bootstrap Confirmation Modal

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    10,320

    [jQuery] [JavaScript] Bootstrap Confirmation Modal

    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:
    Code:
    bootstrapConfirmation();
    Example 2:
    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'
            }
        }
    });
    Source Code
    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");
    };
    Last edited by dday9; Jul 15th, 2021 at 10:46 PM.
    "Code is like humor. When you have to explain it, itís bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  2. #2

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    10,320

    Re: [jQuery] [JavaScript] Bootstrap Confirmation Modal

    The repository has been updated to include a Bootstrap 5 version. This is the source code for V5:
    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 = 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.
    "Code is like humor. When you have to explain it, itís bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width