Custom Advanced Popup boxes jQuery Plugin

Mauro Romano June 08, 2023

custom-advanced-popup-boxes-jquery-plugin

NewmcAlertConfirm is a basic yet completely configurable Bootstrap modal manager built using jQuery. The NewmcAlertConfirm jQuery plugin allows you to easily build alert/confirm dialogues and toast-like notification popups using Bootstrap's modal component.

NewmcAlertConfirm Js Implementation

Include the NewmcAlertConfirm jQuery plugin files after the jQuery library in your HTML page.

Add the following HTML in your

Create an instance of "NewmcAlertConfirm" with options for Alerts/Dialogs

var customAlertConfirm = new NewmcAlertConfirm({
    dialog: 'modal', //type of popup box "modal,dialog"
    type: 'success', //popup box type "success, warning, alert, info, danger"
    title: 'Success!', //Popup box Title
    body: 'Dialog Body',  //Popup box Content
    action: 'Confirm Message',  //Popup box Action text
});

To setup toast message box with auto hide after n seconds

var customToast = new NewmcAlertConfirm({
	containerID: 'NewmcAlertConfirm', // HTML Element Selector
	title: 'Information !', // Toast Title
	body: 'Your Devstoc subscription has been activated.', // Toast Body
	timeOutHide: 5000, // Auto hide time(n in seconds) 
});

Allows you to redirect to another URL when a confirmation button or toast message is clicked.

var customRedirect = new NewmcAlertConfirm({
    title: 'Cart',
    body: 'Redirecting you to checkout, please wait...',
    href: 'https://shop.devstoc.com/checkout/',
    hrefDelay: 2000,  
});

NewmcAlertConfirm jQuery plugin options

var options = {
    containerID   : 'NewmcAlertConfirm',
    dialog        : 'dialog',
    type          : 'default', 
    color         : '#ffffff',
    bgcolor       : '#350c8d', 
    icon          : 'fa-check-circle',
    eID           : null,
    checked       : true,
    title         : 'Your Custom Title',
    body          : 'Your Custom Body.', 
    action        : 'Perform Custom Action(s)?',
    href          : null, 
    hrefDelay     : 0,
    timeOutHide   : null,
    returnFalse   : false,
    triggerON     : true,
    cancelText    : 'Cancel',
    okText        : 'OK'       
}