This time I will share jQuery Plugin and tutorial about Create Custom Alert/Confirm/Modal Popups With jQuery UI – Dialogs Manager, hope it will help you in programming stack.
This is a jQuery & jQuery UI Position based dialog manager to help you create custom alert popups, confirmation dialogs and modal windows on the webpage.
How to use it:
1. Make sure you have the latest jQuery and jQuery UI Position (Choose only the position feature and download the custom build here) are included on the webpage.
1 |
<script src="jquery.min.js"></script> |
2 |
<script src="jquery-ui.min.js"></script> |
2. Load the Dialogs Manager’s JavaScript right before the closing body tag.
1 |
<script src="dist/js/dialogs-manager.min.js"></script> |
3. Create a new Dialogs Manager instance and we’re ready to go.
1 |
var myDialog = new DialogsManager.Instance(); |
4. Create a custom confirmation dialog with Confirm/Cancel actions.
01 |
var confirmWidget = dialogManager.createWidget('confirm', { |
02 |
headerMessage: 'Dialog Title', |
03 |
message: 'Are You Sure?', |
04 |
onConfirm: function () { |
05 |
console.log('I Confirmed!'); |
07 |
onCancel: function () { |
08 |
console.log('I Canceled!'); |
5. Create a normal modal window on the page.
1 |
var lightboxWidget = dialogManager.createWidget('lightbox', { |
3 |
message: 'Modal Content' |
6. Create an alert dialog with a confirm action.
1 |
var alertWidget = dialogManager.createWidget('alert', { |
2 |
headerMessage: 'Dialog Title', |
3 |
message: 'Are You Sure?', |
4 |
onConfirm: function () { |
5 |
console.log('I Confirmed!'); |
7. Customize the styles of the popups.
07 |
-webkit-user-select: none; |
08 |
-moz-user-select: none; |
09 |
background-color: rgba(0, 0, 0, 0.5); |
12 |
.dialog-widget * { box-sizing: border-box; } |
14 |
.dialog-widget-content { |
15 |
background-color: #EAEAEA; |
21 |
box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, 0.2); |
24 |
.dialog-widget-header { |
26 |
background-image: linear-gradient(to top, #A0A09D, #D9D9D9); |
34 |
font-family: sans-serif; |
38 |
.dialog-buttons-wrapper { text-align: center; } |
40 |
.dialog-buttons-wrapper > button { |
Changelog:
v4.8.1 (2020-08-18)
v4.8.0 (2020-08-14)
v4.7.7 (2020-08-10)
v4.7.6 (2020-02-12)
v4.7.5 (2020-02-10)
v4.7.4 (2020-01-19)
v4.7.3 (2019-07-16)
v4.7.2 (2019-06-26)
v4.7.1 (2019-01-14)
v4.7.0 (2019-01-10)
v4.6.1 (2019-01-04)
v4.6.0 (2018-12-26)
v4.5.1 (2018-10-28)
This awesome jQuery plugin is developed by kobizz. For more Advanced Usages, please check the demo page or visit the official website.
