Create Custom Alert/Confirm/Modal Popups With jQuery UI - Dialogs Manager

Create Custom Alert/Confirm/Modal Popups With jQuery UI - Dialogs Manager

This is a jQuery & jQuery UI based dialog manager to help you create custom alert popups, confirmation dialogs and modal windows on the webpage.

1. Make sure you have the latest jQuery and jQuery UI libraries are included on the webpage.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha384-Dziy8F2VlJQLMShA6FHWNul/veM9bCkRUaLqr199K94ntO5QUrLJBEbYegdSkkqX" crossorigin="anonymous"></script>

2. Load the Dialogs Manager's JavaScript right before the closing body tag.

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

3. Create a new Dialogs Manager instance and we're ready to go.

var myDialog = new DialogsManager.Instance();

4. Create a custom 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 normal modal window on the page.

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

6. Create an alert dialog with a confirm action.

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

7. Customize the styles of the popups.

.dialog-widget {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  background-color: rgba(0, 0, 0, 0.5);
}
.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 {
  height: 20px;
  background-image: linear-gradient(to top, #A0A09D, #D9D9D9);
  font-size: 14px;
  text-align: center;
}
.dialog-message {
  height: 70%;
  padding: 10px;
  font-family: sans-serif;
  font-size: 14px;
}
.dialog-buttons-wrapper { text-align: center; }
.dialog-buttons-wrapper > button {
  margin: 0 10px;
  cursor: pointer;
}

This awesome jQuery plugin is developed by kobizz. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 05.07.2018
  • Source