Promise Confirmation Dialog In Pure JavaScript – ExConfirmBox

Preview:

Description:

ExConfirmBox is a lightweight, zero-dependency JavaScript plugin to create custom promise confirmation dialogs on the webpage.

Fully customizable and easy-to-style in the JavaScript. Without any CSS.

How to use it:

Import the JavaScript file ‘exConfirm.js’ into the document and you’re ready to go.

<script src="exConfirm.js"></script>

Set the title & confirm message.

var configOpt = {
    title: "Sample Title!",
    message : "Sample Query?"
};

Activate the confirmation dialog with confirm/cancel callbacks.

exConfirmPromise.make(configOpt).then(function (e) {
  // do something
}).then(function () {
  exConfirmPromise.make(configOpt).then(function (e) {
    // do something
  });
});

Customize the appearance of the confirmation dialog.

var configOpt = {
    zIndex: 9999, //Integer
    overlayBackground: "rgba(255,255,255,0)", //String [HEX, RGB, RGBA]
    bodyBackground: "rgba(255,255,255,1)", //String [HEX, RGB, RGBA]
    bodyBorder: "2px solid #1c84ef", //String
    titleBackground: "rgb(28, 132, 239)", //String [HEX, RGB, RGBA]
    textColor: "#000000", //String [HEX, RGB, RGBA]
    titleColor: "#ffffff", //String [HEX, RGB, RGBA]
    btnPosition: "right", //String [left, center, right]
    top: "5%", //String [px, %]
    right: "38%", //String [px, %],
    disableForceFocus : false
};

Enable/disable the animation.

var configOpt = {
    animation: true, //Bool
    animationTime: 500 //Integer        
};

Customize the confirm/cancel buttons.

var configOpt = {
    btnClassSuccess: "btn btn-default btn-sm btn-sm-25px", //String
    btnClassSuccessText: "Yes", //String
    btnClassFail: "btn btn-default btn-sm btn-sm-25px", //String
    btnClassFailText: "No", //String      
};

Event handlers.

var configOpt = {
    onResolve: function(){},
    onReject: function(){},          
};

Changelog:

06/26/2020

• Added disableForceFocus, onResolve, onReject

11/26/2018

• Update exConfirm.js