Simple jQuery dialog plugin. Opens a confirmation dialog.
Sample usage,
<a href="#" class="dialog">Open Dialog</a>
<a href="#sample-hidden-content" class="dialog">Open Dialog</a>
<a href="http://sample-template-file" class="dialog">Open Dialog</a>
$(".dialog").dialog({
title: "Hello World!",
message: "This is my first message",
confirm: {
text: "OK",
className: "confirm-button"
},
onConfirm: function(){
form.submit();
}
});
Direct usage for opening on load or after a callback
$.uxrdialog({
title: "Hello World!",
message: "This is my first message",
confirm: {
text: "OK",
className: "confirm-button"
},
onConfirm: function(){
form.submit();
}
});
| Property |
Default |
Description |
| title |
null |
Title line of the dialog |
| message |
null |
Dialog message. Could be a plain text or html formatted text |
| type |
warning |
Adds a dialog type class to the wrapper e.g. uxitd-dialog-warning |
| confirm |
Obj |
Has show (default: true), text (default: Tamam) and className (default: primary-action)attributes. Fires the confirm action |
| cancel |
Obj |
Has show (default: true), text (default: Vazgeç) and className (default: button) attributes. Fires the cancel action |
| buttons |
Obj |
Json array of other buttons |
| close |
false |
Visibility of close icon |
| blockUI |
true |
Adds an overlay at the top of the page |
| className |
null |
For advanced styling, allow to add your own style class to dialog wrapper |
| allowMultiple |
false |
Allows to open more than one dialog simultaneously |
| openOnload |
false |
If true, desired dialog will open on page load then, it will be available with on click event. |
| Data Attribute |
Description |
| title |
Title line of the dialog |
| message |
Dialog message. Could be a plain text or html formatted text |
| type |
Adds a dialog type class to the wrapper e.g. uxitd-dialog-warning |
| confirm |
Has show (default: true), text (default: Tamam) and className (default: primary-action)attributes. Fires the confirm action |
| cancel |
Has show (default: true), text (default: Vazgeç) and className (default: button) attributes. Fires the cancel action |
| close |
Visibility of close icon |
| blockUI |
Adds an overlay at the top of the page |
| class-name |
For advanced styling, allow to add your own style class to dialog wrapper |
| allow-multiple |
Allows to open more than one dialog simultaneously |
| open-onload |
If true, desired dialog will open on page load then, it will be available with on click event. |
| on-ready |
Calls the function when plugin is ready |
| on-open |
Calls the function when dialog is opened |
| on-confirm |
Calls the function when confirm button clicked |
| on-cancel |
Calls the function when cancel button clicked |
| on-close |
Calls the function when dialog is closed |
| confirm-text |
Custom confirm button text |
| cancel-text |
Custom cancel button text |
| confirm-class |
For advanced styling, allow to add your own style class to confirm button |
| cancel-class |
For advanced styling, allow to add your own style class to cancel button |
| Callback |
|
| onReady |
Calls the function when plugin is ready |
| onOpen |
Calls the function when dialog is opened |
| onConfirm |
Calls the function when confirm button clicked |
| onCancel |
Calls the function when cancel button clicked |
| onClose |
Calls the function when dialog is closed |
| Method |
Description |
| $(selector).dialog(options) |
Binds the plugin |
| $.uxrdialog(options) |
Directly opens a dialog with desired options |
| $.uxrdialog.version |
Shows the plugin version |
| $.uxrdialog.settings |
Shows the default settings |