jquery confirm3是一个功能十分强大的确认对话框插件。有以下几种模式:alert,confirm(promp),dialog。
一、用法示例
alert(警告栏)示例:
$.alert({
title: 'Alert!',
content: 'Simple alert!',
});
confirm(操作选项)示例:
prompt(提示用户输入)示例:
$.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?');
}
}
}
});
dialog(对话框)示例:
$.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({
title: 'Text content!',
content: 'Simple modal!',
});
二、alert,confirm,dialog简便用法:
三、ajax模式
$.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.');
});
}
});
四、options
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 |
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
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.