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 |