
scripts.node_modules.jquery-confirm.index.html Maven / Gradle / Ivy
jquery-confirm.js | The multipurpose alert & confirm
jquery-confirm
v
-
docs
view on Github
Welcome to jquery-confirm!
Easy to use and highly flexible!
A jQuery plugin that provides great set of features like,
Auto-close, Ajax-loading, Themes, Animations and more.
This plugin is actively developed, I would love you have your suggestions.
Please post your Suggestions here.
angular-confirm is here
Use angular scope within your confirm modal, with all the features of
jquery-confirm
Features
These features can practically be used like so.
Elegant Alerts.
Stacked Confirmations
Success, error, warning
Need input?
Its also a Dialog.
Not so important modal
Loading from remote places
Some actions maybe critical
Responds to keystrokes
Automatically centered
Loading images
Clean animations
Drag me around
Themes
jquery-confirm comes loaded with themes for all common use cases.
Whats new in v3.3.4
- Safari height bug fix. PR by lanre-ade
- Fix isClosed bug for firefox. PR by loganm
- Remove scroll to top when content height changes. PR by amikot
- added support for AMD and commonJS
Updates in v3.3.2
Major changes
- Moved overflow scroll inside modal #286
Improvements
- 'draggable' improved
- Added 'animateFromElement' option
- Added 'smoothScroll' option
- Added 'hilight' option
- Added 'showLoading','hideLoading' option
- Accept jquery dom element in content #313
- Updated docs
- Fixes #255 #307 #290
Removals
- 'setDialogCenter' method deprecated, dialog centered with CSS tables
- 'alignMiddle' method deprecated
Getting started
Notes on migrating from v2 to v3.
https://github.com/craftpip/jquery-confirm/wiki/Migrate-from-v2-to-v3
Installation
Download
Download the Latest version and use files in the /dist/
folder.
via CDN:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
via Bower:
Simply copy these links
$ bower install craftpip/jquery-confirm
via Npm:
$ npm install jquery-confirm
Dependencies:
- Bootstrap by Twitter >= v3 (optional, if you want to use responsive layouts)
- jQuery library > v1.8
to use jconfirm without bootstrap set useBootstrap:
false
Quick Usage
$.alert
adds one button (okay) if no buttons are specified, this lets the user to close the
modal.
$.alert({
title: 'Alert!',
content: 'Simple alert!',
});
$.confirm
if no buttons are specified, two buttons (Okay & cancel) will be added.
$.confirm({
title: 'Confirm!',
content: 'Simple confirm!',
buttons: {
confirm: function () {
$.alert('Confirmed!');
},
cancel: function () {
$.alert('Canceled!');
},
somethingElse: {
text: 'Something else',
btnClass: 'btn-blue',
keys: ['enter', 'shift'],
action: function(){
$.alert('Something else?');
}
}
}
});
Showing prompt using confirm
Simply add form to the content and bind the events you want.
This form can also be loaded via ajax.
$.confirm({
title: 'Prompt!',
content: '' +
'<form action="" class="formName">' +
'<div class="form-group">' +
'<label>Enter something here</label>' +
'<input type="text" placeholder="Your name" class="name form-control" required />' +
'</div>' +
'</form>',
buttons: {
formSubmit: {
text: 'Submit',
btnClass: 'btn-blue',
action: function () {
var name = this.$content.find('.name').val();
if(!name){
$.alert('provide a valid name');
return false;
}
$.alert('Your name is ' + name);
}
},
cancel: function () {
//close
},
},
onContentReady: function () {
// bind to events
var jc = this;
this.$content.find('form').on('submit', function (e) {
// if the user submits the form by pressing enter in the field.
e.preventDefault();
jc.$$formSubmit.trigger('click'); // reference the button and click it
});
}
});
$.dialog
removes buttons and explicitly shows the closeIcon (×)
$.dialog({
title: 'Text content!',
content: 'Simple modal!',
});
$.fn.confirm
This can be used to bind to a element directly
If no buttons are defined, the default buttons (okay and cancel) will be added, and
default action for okay will be to redirect on the given href.
use
this.$target
to get the clicked element.
HTML
<a class="twitter" data-title="Goto twitter?" href="http://twitter.com/craftpip">Goto twitter</a>
Javascript
$('a.twitter').confirm({
content: "...",
});
$('a.twitter').confirm({
buttons: {
hey: function(){
location.href = this.$target.attr('href');
}
}
});
Shorthand usage
The shorthand thingy takes in two string arguments, first one is the content of the
dialog and second the title of the dialog.
The second argument is optional.
$.alert('Content here', 'Title here'); try me
$.confirm('A message', 'Title is optional'); try me
$.dialog('Just to let you know'); try me
Lazy open
If you want to create a instance of jconfirm and save it for later use.
var a = $.confirm({
lazyOpen: true,
});
a.open();
a.close();
a.toggle(); // toggle open close.
NOTE
:
The $.confirm()
, $.dialog()
& $.alert()
methods are alias
of jconfirm()
.
All three methods indirectly call the jconfirm base function altering the
provided options.
ADVANCED:
this.$body
is the body div for jquery-confirm. You can find and alter any element at
run time.
Customizing
Dialog type
Dialog types helps give the user a hint as to what the dialog is about
$.confirm({
title: 'Encountered an error!',
content: 'Something went downhill, this may be serious',
type: 'red',
typeAnimated: true,
buttons: {
tryAgain: {
text: 'Try again',
btnClass: 'btn-red',
action: function(){
}
},
close: function () {
}
}
});
Icons
Give meaning to your dialog with custom icons.
Read about Font Awesome
here
.
$.confirm({
icon: 'glyphicon glyphicon-heart',
title: 'glyphicon'
});
$.confirm({
icon: 'fa fa-warning',
title: 'font-awesome'
});
$.confirm({
icon: 'fa fa-spinner fa-spin',
title: 'Working!',
content: 'Sit back, we are processing your request!'
});
Close icon
jQuery confirm uses ×
html entity for this close symbol, however you can
use Any icon of your choice (fa, glyphicon, zmdi)
By default closeIcon
is set to null
.
That means, if buttons are not defined the closeIcon will be shown, else will not be shown.
To explicitly show closeIcon
set it to a truthy value and vise versa.
Turn on closeIcon explicitly
$.confirm({
closeIcon: true
});
Using other libraries for icons
$.confirm({
closeIcon: true,
closeIconClass: 'fa fa-close'
});
Handle closeIcon's callback
Control what happens when close icon is clicked.
closeIcon can take in function to handle the button click or you can return a button name.
$.confirm({
closeIcon: function(){
return false; // to prevent close the modal.
// or
return 'aRandomButton'; // set a button handler, 'aRandomButton' prevents close.
},
// or
closeIcon: 'aRandomButton', // set a button handler
buttons: {
aRandomButton: function(){
$.alert('A random button is called, and i prevent closing the modal');
return false; // you shall not pass
},
close: function(){
}
}
});
Custom width
Jquery-confirm uses bootstrap's grid system for its layout by default.
You can simply provide column classes to adjust the modal's width.
You can also set responsive layouts.
Bootstrap grid docs
instead of typing the whole thing, provide keywords like
xlarge
/xl
equivalent to col-md-12
large
/l
equivalent to col-md-8 col-md-offset-2
medium
/m
equivalent to col-md-6 col-md-offset-3
small
/s
equivalent to col-md-4 col-md-offset-4
xsmall
/xs
equivalent to col-md-2 col-md-offset-5
$.confirm({
columnClass: 'small'
});
$.confirm({
columnClass: 'col-md-4 col-md-offset-4',
});
$.confirm({
columnClass: 'col-md-12'
});
$.confirm({
columnClass: 'col-md-4 col-md-offset-8 col-xs-4 col-xs-offset-8',
containerFluid: true, // this will add 'container-fluid' instead of 'container'
});
Custom width without Bootstrap
Many have a different taste, who wont be using bootstrap in their projects.
You can simply provide the width of the modal, in px or any metric you want.
useBootstrap
must be set to false
to use this feature
you can globally disable bootstrap by setting jconfirm.defaults.useBootstrap = false
$.confirm({
boxWidth: '30%',
useBootstrap: false,
});
$.confirm({
boxWidth: '500px',
useBootstrap: false,
});
Namespaced bootstrap
Namespacing is basically isolating the bootstrap classes names, like turning '.row' to
'.custom-row'
If you're using a namespaced bootstrap library, this option is for you.
it is ideal to set this in jconfirm.defaults
$.confirm({
bootstrapClasses: {
container: 'container',
containerFluid: 'container-fluid',
row: 'row',
},
});
Draggable
Make the dialog draggable. simple.
Draggable is set to TRUE by default.
$.confirm({
title: 'Hello there',
content: 'click and hold on the title to drag',
draggable: true,
});
Window border
By default jconfirm's modal is prevented from being dragged out of the window.
$.confirm({
title: 'Hello there',
content: 'Drag this modal out of the window',
draggable: true,
dragWindowBorder: false,
});
Window gap
If dragWindowBorder
is set to true
a defined space is maintained between the modal and the window.
this distance can be changed with this feature.
$.confirm({
title: 'Hello there',
content: 'try to drag this modal out of the window',
draggable: true,
dragWindowGap: 0, // number of px of distance
});
Animations
The animations section is moved to the animations.html page.
This page has docs for animations for modal open/close and backgroundDismiss
It also describes how to create custom animations.
see Animations
Themes
The themes section is moved to the themes.html page
This page has docs for themes & how to create custom themes
see Themes
Ajax loading
With jconfirm you have the power to load content directly when needed via ajax, no extra code.
Two methods are available to load content via Ajax:
- Pass in String content the URL with "URL:" prepended.
content: "URL:http://example.com/getData?id=1"
- Pass in Function that returns a jQuery ajax promise.
content: function(){ return $.get(...); }
From v3 onwards,
buttons are not disabled
until ajax call is complete.
contentLoaded is called when the ajax is complete. before the
content is put in DOM.
Using the "URL:" prefix
Using the url prefix is the quick way, however has some limitations like you cannot modify the ajax
call's method, dataType, etc.
To use, prepend your URL with "URL:" ends up like "URL:http://example.com/file.extension".
NOTE: the returned data is set as content automatically before
contentLoaded callback is called.
view text.txt
$.confirm({
title: 'Title',
content: 'url:text.txt',
onContentReady: function () {
var self = this;
this.setContentPrepend('<div>Prepended text</div>');
setTimeout(function () {
self.setContentAppend('<div>Appended text after 2 seconds</div>');
}, 2000);
},
columnClass: 'medium',
});
Using Ajax promise
This option provides full control over the ajax options and what data is to be inserted.
The content takes a function that returns a jQuery promise ($.ajax, $.get, $.post, etc.).
In this example a json object is requested, and a part of it is set as content.
NOTE: the returned data is NOT set as content automatically, you
must set the content yourself.
view bower.json
$.confirm({
content: function () {
var self = this;
return $.ajax({
url: 'bower.json',
dataType: 'json',
method: 'get'
}).done(function (response) {
self.setContent('Description: ' + response.description);
self.setContentAppend('<br>Version: ' + response.version);
self.setTitle(response.name);
}).fail(function(){
self.setContent('Something went wrong.');
});
}
});
Ajax complete callback contentLoaded
When the ajax call is complete the contentLoaded
function is called with arguments
Data, Status & Xhr object.
contentLoaded
is called before the content is put in DOM
If you want to do stuff after the content has put in DOM, use onContentReady
$.confirm({
content: 'url:text.txt',
contentLoaded: function(data, status, xhr){
// data is already set in content
this.setContentAppend('<br>Status: ' + status);
}
});
Using the url: prefix method
$.confirm({
content: function(){
var self = this;
self.setContent('Checking callback flow');
return $.ajax({
url: 'bower.json',
dataType: 'json',
method: 'get'
}).done(function (response) {
self.setContentAppend('<div>Done!</div>');
}).fail(function(){
self.setContentAppend('<div>Fail!</div>');
}).always(function(){
self.setContentAppend('<div>Always!</div>');
});
},
contentLoaded: function(data, status, xhr){
self.setContentAppend('<div>Content loaded!</div>');
},
onContentReady: function(){
this.setContentAppend('<div>Content ready!</div>');
}
});
Using the Ajax promise method
You can set your content in any of the callbacks.
callback execution flow:
- Promise's done
- Promise's always
- contentLoaded
- onContentReady
Auto close
Do a action if the user does not respond within the specified time.
This comes in handly when the user is about to do something critical.
The autoClose
option takes in a string, like 'confirm|4000'
where confirm
is the action to trigger after 4000 milliseconds.
Practical examples of autoClose
$.confirm({
title: 'Delete user?',
content: 'This dialog will automatically trigger \'cancel\' in 6 seconds if you don\'t respond.',
autoClose: 'cancelAction|8000',
buttons: {
deleteUser: {
text: 'delete user',
action: function () {
$.alert('Deleted the user!');
}
},
cancelAction: function () {
$.alert('action is canceled');
}
}
});
$.confirm({
title: 'Logout?',
content: 'Your time is out, you will be automatically logged out in 10 seconds.',
autoClose: 'logoutUser|10000',
buttons: {
logoutUser: {
text: 'logout myself',
action: function () {
$.alert('The user was logged out');
}
},
cancel: function () {
$.alert('canceled');
}
}
});
Background dismiss
Control what happens if the user clicks outside the modal.
backgroundDismiss is set to false by default.
$.confirm({
backgroundDismiss: true, // this will just close the modal
});
$.confirm({
backgroundDismiss: function(){
return false; // modal wont close.
},
});
$.confirm({
backgroundDismiss: function(){
return 'buttonName'; // the button will handle it
},
});
$.confirm({
backgroundDismiss: 'buttonName',
content: 'in here the backgroundDismiss action is handled by buttonName' +
'<div class="checkbox"><label><input type="checkbox" id="enableCheckbox"> Enable backgroundDismiss</label></div>',
buttons: {
buttonName: function () {
var $checkbox = this.$content.find('#enableCheckbox');
return $checkbox.prop('checked');
},
close: function () {
}
}
});
Background dismiss animation
Fancy animations to grab users attention. Click outside the modal to see the animation.
$.confirm({
backgroundDismiss: false,
backgroundDismissAnimation: 'shake',
});
$.confirm({
backgroundDismiss: false,
backgroundDismissAnimation: 'glow',
});
Escape key
Control what happens when the escape key is pressed. This is enabled by default.
backgroundDismiss is called when escape key is pressed. if backgroundDismiss is false, it will shake
the modal.
$.confirm({
escapeKey: true,
backgroundDismiss: false,
});
$.confirm({
escapeKey: 'buttonName',
buttons: {
buttonName: function(){
$.alert('Button name was called');
},
close: function(){
}
}
});
RTL support
If you need to show the confirm box in rtl then you should set the rtl option to true.
$.alert({
title: 'پیغام',
content: 'این یک متن به زبان شیرین فارسی است',
rtl: true,
closeIcon: true,
buttons: {
confirm: {
text: 'تایید',
btnClass: 'btn-blue',
action: function () {
$.alert('تایید شد.');
}
},
cancel: {
text: 'انصراف',
action: function () {
}
}
}
});
Callbacks
Get more control over the modal, mainly important for binding events for the modal elements.
contentLoaded callback is called when Ajax loading is used
$.confirm({
title: false,
content: 'url:callback.html',
onContentReady: function () {
// when content is fetched & rendered in DOM
alert('onContentReady');
var self = this;
this.buttons.ok.disable();
this.$content.find('.btn').click(function(){
self.$content.find('input').val('Chuck norris');
self.buttons.ok.enable();
});
},
contentLoaded: function(data, status, xhr){
// when content is fetched
alert('contentLoaded: ' + status);
},
onOpenBefore: function () {
// before the modal is displayed.
alert('onOpenBefore');
},
onOpen: function () {
// after the modal is displayed.
alert('onOpen');
},
onClose: function () {
// before the modal is hidden.
alert('onClose');
},
onDestroy: function () {
// when the modal is removed from DOM
alert('onDestroy');
},
onAction: function (btnName) {
// when a button is clicked, with the button name
alert('onAction: ' + btnName);
},
buttons: {
ok: function(){
}
}
});
Global defaults
You can setup global settings for your jconfirm.
jconfirm.defaults should be set after
the plugin has loaded. of course.
jconfirm.defaults = {
title: 'Hello',
titleClass: '',
type: 'default',
typeAnimated: true,
draggable: true,
dragWindowGap: 15,
dragWindowBorder: true,
animateFromElement: true,
smoothContent: true,
content: 'Are you sure to continue?',
buttons: {},
defaultButtons: {
ok: {
action: function () {
}
},
close: {
action: function () {
}
},
},
contentLoaded: function(data, status, xhr){
},
icon: '',
lazyOpen: false,
bgOpacity: null,
theme: 'light',
animation: 'scale',
closeAnimation: 'scale',
animationSpeed: 400,
animationBounce: 1,
rtl: false,
container: 'body',
containerFluid: false,
backgroundDismiss: false,
backgroundDismissAnimation: 'shake',
autoClose: false,
closeIcon: null,
closeIconClass: false,
watchInterval: 100,
columnClass: 'col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1',
boxWidth: '50%',
scrollToPreviousElement: true,
scrollToPreviousElementAnimate: true,
useBootstrap: true,
offsetTop: 40,
offsetBottom: 40,
bootstrapClasses: {
container: 'container',
containerFluid: 'container-fluid',
row: 'row',
},
onContentReady: function () {},
onOpenBefore: function () {},
onOpen: function () {},
onClose: function () {},
onDestroy: function () {},
onAction: function () {}
};
Options
Options, their defaults, possibilities and explanations.
Name
Type
Default
Description
title
String, Function
'Hello'
Title of the dialog.
Also accepts a function that returns a string.
titleClass
String
''
Class that will be applied to the title.
type
String
'default'
Colors the modal to give the user a hint of success/failure/warning,
available options are: 'blue, green, red, orange, purple & dark'
typeAnimated
Boolean
true
Adds a little animation to the colors.
draggable
Boolean
true
Makes the dialog draggable,
the drag point is the title of the model, if the title is not defined the model
won't be draggable.
alignMiddle is set to false, when using draggable.
dragWindowGap
Number
15
Draggable gap between the modal and window, defaults to 15px
dragWindowBorder
Boolean
true
If the modal should be restricted inside the window
animateFromElement
Boolean
true
Animates the modal from the clicked element
alignMiddle
Boolean
true
IMPORTANT @deprecated
The model will be position in center of the screen.
When the content in the model changes, the model is reposition itself.
smoothContent
Boolean
true
Smooth height transition when content in modal changes.
content
String, Function
'Are you sure to continue?'
Content for the dialog.
Accepts functions that return string or ajax promise.
contentLoaded
Function
function(data,status,xhr){}
In use only when content is loaded via Ajax.
is called on always callback of $.ajax
buttons
Object
{}
Multiple definition of buttons
please see button definition for button properties
icon
String
''
Icon class prepended before the title.
ex: 'fa fa-icon'
lazyOpen
Boolean
false
Does not open the modal instantly.
requires to call the open() function to open the modal
bgOpacity
Float
null
if null, the theme's default bg opacity is applied.
theme
String
'light'
Color theme for the dialog.
possible options are 'light', 'dark', 'material' & 'bootstrap'
animation
String
'zoom'
The Open animation for the dialog.
possible options are right, left, bottom, top, rotate, none, opacity, scale, zoom,
scaleY, scaleX, rotateY, rotateYR (reverse), rotateX, rotateXR (reverse)
The 'blur' animation was removed in v1.1.2
closeAnimation
String
'scale'
The close animation for the dialog. Same options as animation.
animationSpeed
Number
400
Animation duration in milliseconds.
animationBounce
Float
1
Adds a Bounce open animation,
1 = No bounce
escapeKey
Boolean, String
false
if false, escapeKey wont work,
if true, will work, but no callbacks,
if string, will be assigned to button.
rtl
Boolean
false
Use the Right to left text layout.
container
String
'body'
Specify where the generated HTML content for jconfirm should append.
By default it appends in the document's <body>.
containerFluid
Boolean
false
If true, will use the container-fluid layout, to use the full browser width.
backgroundDismiss
Boolean, String, Function
false
If false, user wont be able to exit by clicking out.
If true, user will be able to click out, no callback.
If string, will be assigned to button.
If function, will be used as callback.
backgroundDismissAnimation
String
'shake'
Animation to perform to grab the user's attention when user clicks out of the box.
autoClose
String
false
Auto-close the dialog within a specified time, if the user doesn't respond.
possible option 'buttonName|400'
the string is divided in two halves with pipe '|'
, the first part
specifies the button name to trigger. The other
half specifies the wait time in milliseconds.
closeIcon
Boolean
null
By default closeIcon is visible if both buttons are false. (dialog mode).
closeIcon can be shown by setting this value to true.
closeIconClass
String
false
By default jQuery confirm uses × html entity for this close symbol. You can
provide icon class here to change it.
watchInterval
Number
100
Watch the modal for changes and is centered on screen.
Added in v 2.5.0
columnClass
String
'col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10
col-xs-offset-1'
Provides a better way to set Custom width and is responsive.
You can also set custom widths for different display sizes using the Bootstraps
grid.
useBootstrap
Boolean
true
if true, bootstrap classes will be set on the modal. 'columnClass' wil be set on the
box.
if false, bootstrap classes will not be set, instead 'boxWidth' will be set on the
box.
boxWidth
String
'50%'
This options sets the width of the box, when you're not planning to use bootstrap in
your project
Will only work if 'useBootstrap' is set to false,
scrollToPreviousElement
Boolean
true
Scroll back to the element that was focused before jconfirm model opened.
scrollToPreviousElementAnimate
Boolean
true
Animates the scroll to previous element.
offsetTop
Number
40
The model will maintain at least 50px from the window's top.
offsetBottom
Number
40
The model will maintain at least 50px from the window's bottom.
bootstrapClasses
object
{
container: 'container',
containerFluid: 'container-fluid',
row: 'row',
}
These are the default classes that are set when bootstrap is used,
this option is available to folks who use namespaced bootstrap classes.
onContentReady
Function
function(){}
is called when the content is put in DOM and the modal is open. (When the modal is
completed ready.)
onOpenBefore
Function
function(){}
is called when the modal is going to be opened.
onOpen
Function
function(){}
is called when the modal has finished opening.
onClose
Function
function(){}
is called when the modal is going to be closed.
onDestroy
Function
function(){}
is called after the modal element is removed from the DOM.
onAction
Function
function(buttonName){}
is called when any of the button is clicked. buttonName is provided as argument.
Api
These are a few stuff, that will let you interact and make changes in your modal on run time.
The function $.confirm()
returns an object on execution.
var jc = $.confirm({
title: 'awesome',
onContentReady: function(){
// this === jc
}
});
jc.setTitle(title: string)
function
Sets the title and overwrites jc.title
jc.setIcon(iconClass: string)
function
Sets the title and overwrites jc.title
jc.setContent(content: string | jQuery)
function
Sets the content and overwrites jc.content
jc.setContentPrepend(content: string | jQuery)
function
Prepends content to content.
jc.setContentAppend(content: string | jQuery)
function
Appends content to content
jc.setType(typeClass: string)
function
Sets a new type class
jc.showLoading(disableButtons: boolean)
function
Show loading spinner inside modal, disableButtons if set to true will disable the buttons.
jc.hideLoading(enableButtons: boolean)
function
Hide loading spinner inside modal, enableButtons if set to true will enable the buttons.
jc.close() : boolean
function
The close method closes/destroys the dialog.
jc.open() : boolean
function
Opens the modal again, if it is closed. (Added in v3.0.0)
jc.toggle()
function
Toggle between open and close modal
jc.highlight()
function
Trigger background dismiss animation
jc.setBoxWidth(width: string)
function
Set the box width of the modal. Only if useBootstrap is set to false
jc.setColumnClass(className: string)
function
Set the bootstrap column class of the modal. Only if useBootstrap is set to true
jc.setTheme(themeName: string)
function
Set the theme class of the modal.
jc.isClosed() : boolean
function
returns true if the modal is closed, else false.
jc.isOpen() : boolean
function
returns true if the modal is open, else false.
jc.setDialogCenter()
Deprecated
function
Centers the dialog on screen. This is done for you by the watch timer when the content
changes.
jc.buttons.<buttonName>.setText(text: string)
function
Set text for a button
jc.buttons.<buttonName>.addClass(className: string)
function
Adds a class to the button
jc.buttons.<buttonName>.removeClass(className: string)
function
Removes class from the button
jc.buttons.<buttonName>.disable()
function
Disabled the button with attribute disabled='disabled'
jc.buttons.<buttonName>.enable()
function
Enables a previously disabled button
jc.buttons.<buttonName>.hide()
function
Hides the button using CSS 'display: none'
jc.buttons.<buttonName>.show()
function
Shows a previously hidden button
jc.$body
jquery DOM element
Alias: jc.$b, is the modal body that includes buttons content title and stuff.
jc.$content
jquery DOM element
You can access your Dialogs contents via this object.
jc.$title
jquery DOM element
To access the title DOM of the modal. same use as with $content
jc.$icon
jquery DOM element
To access the icon DOM of the modal. same use as with $content
jc.$target
jquery DOM element
To access the clicked element, only available when using
$(element).confirm() and using a confirm callback.