Press "Enter" to skip to content

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

jQuery Custom Alert Box – 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.

How to make use of it:

1. Make certain you could have the most recent jQuery and jQuery UI Position are included on the webpage.

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

2. Load the Dialogs Manager’s JavaScript proper earlier than the closing physique tag.

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

3. Create a brand new Dialogs Manager occasion and we’re able to go.

var myDialog = new DialogsManager.Instance();

4. Create a customized affirmation 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 standard modal window on the web page.

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

6. Create an alert dialog with a verified motion.

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;
}

jQuery Confirm Box with Custom Buttons, Customize Javascript Alert Box CSS, Custom Confirm Box


See Demo And Download

Official Website(kobizz): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *