Custom Alert, Prompt, And Confirm Box Using jQuery

Dialogs Manager jQuery UI Position primarily based dialog supervisor that can assist you to create customized alert popups, affirmation dialogs, and modal home windows on the webpage.

Please note: Because the jQuery UI library is very large, and you only need the Function feature, it is highly recommended to download it through the official Download Builder on the jQuery UI website. Just choose the position-only feature and download it to your local folder.

Must Read: Lightweight Implementation Of Modal Dialogs for Angular | ng-modal

jQuery Dialogs Manager Plugin Details

Post Name	jQuery Custom Alert Box
Author Name	kobizz
Category	Modal, Popup Plugins
Official Page	Click Here
Official Website	github.com
Publish Date	September 6, 2020
Last Update	August 1, 2023
Download	Link Below
License	MIT

How to make use of it:

1. Add the most recent jQuery and jQuery UI on the webpage.

<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>

2. Load the Dialogs Manager’s JavaScript.

<script src="dist/js/dialogs-manager.min.js"></script>

3. Create a new Dialogs Manager.

var myDialog = new DialogsManager.Instance();

4. Create a customized confirmation dialog with Confirm/Cancel actions.

var confirmWidget = dialogManager.createWidget('confirm', {
    headerMessage: 'Dialog Title',
    message: 'Are You Sure?',
    onConfirm: function () {
      console.log('I Confirmed!');
    },
    onCancel: function () {
      console.log('I Canceled!');
    }
});

5. Create a modal window on the web page.

var lightboxWidget = dialogManager.createWidget('lightbox', {
    headerMessage: 'Modal Title',
    message: 'Modal Content'
});

6. Create an alert dialog.

var lightboxWidget = dialogManager.createWidget('lightbox', {
    headerMessage: 'Modal Title',
    message: 'Modal Content'
});

7. Customize the types of popups.

.dialog-widget 

.dialog-widget * { box-sizing: border-box; }

.dialog-widget-content 
  background-color: #EAEAEA;
  position: absolute;
  width: 350px;
  height: 150px;
  margin: auto;
  border-radius: 5px;
  box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, 0.2);


.dialog-widget-header 

.dialog-message 
  height: 70%;
  padding: 10px;
  font-family: sans-serif;
  font-size: 14px;


.dialog-buttons-wrapper 

.dialog-buttons-wrapper > button {
  margin: 0 10px;
  cursor: pointer;
}