Custom Alert, Prompt, And Confirm Box Using jQuery | Dialogs Manager

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: Annoying Pop-ups Confirming the Submission of Form | sweetconfirm.js

How to make use of it:

1. Assuming we have a simple button:

<button id="click-me">Click Me</button>

2. We will write the following script:

jQuery(function ($) {

    var dialogManager = new DialogsManager.Instance(); // First, create instance of DialogsManager. Usually, you don't need more than one instance per application

    var confirmWidget = dialogManager.createWidget('confirm'); // Now, create a widget with the type you want to use

    confirmWidget.setMessage('Hello, my name is world!'); // Now, set message that will be shown in the dialog

    confirmWidget.onConfirm = function () { // Set what happens when the user clicked on the 'confirm' button

        console.log('I Confirmed!');
    };

    confirmWidget.onCancel = function () { // Set what happens when the user clicked on the 'cancel' button

        console.log('I Canceled!');
    };

    $('#click-me').on('click', function () { // Now, bind event to our button
        confirmWidget.show(); // Clicking this button will show the dialog
    });
});

3. In addition, you can write the full build of the widget at once, like this:

jQuery(function ($) {

    var dialogManager = new DialogsManager.Instance();

    var confirmWidget = dialogManager.createWidget('confirm', {
        message: 'Hello, my name is world!',
        onConfirm: function () {

            console.log('I Confirmed!');
        },
        onCancel: function () {

            console.log('I Canceled!');
        }
    });

    $('#click-me').on('click', function () {
        confirmWidget.show();
    });
});

Read More – 

[Corner] Fully Customizable Popup Box of Browser Window
Notiflix Notification, Popup Boxes, Loading Indicators, and More in JavaScript Library


See Demo And Download

Official Website(kobizz): Click Here

This superior jQuery/javascript plugin is developed by kobizz. For extra Advanced Usage, please go to the official website.

Share