[转]jquery-confirm

本文转自：http://craftpip.github.io/jquery-confirm/

Practical Uses

These features can practically be used like so.

Alerts

Elegant Alerts.

Confirmation

Stacked Confirmations

Must read

Important modal

Act like Prompt

Need input?

Need Modals?

Its also a Dialog.

Getting data from API

Something huge?

Auto-close

User friendly?

Hit the keys

Keyboard actions?

Installation

Download 
Download the Latest version and use files in the /dist/ folder.

via Bower: 
$ bower install craftpip/jquery-confirm

via Npm: 
$ npm install jquery-confirm

Quick Usage

Dependencies:

• Bootstrap by Twitter >= v2
• jQuery library > v1.8

Show an alert dialog 
 $.alert() Has only confirm button.

example alert

 

1. $.alert({
2. title: 'Alert!',
3. content: 'Simple alert!',
4. confirm: function(){
5. alert('Confirmed!');
6. }
7. });

Show an confirm dialog 
 $.confirm() Has both confirm & cancel buttons.

example confirm

 

1. $.confirm({
2. title: 'Confirm!',
3. content: 'Simple confirm!',
4. confirm: function(){
5. alert('Confirmed!');
6. },
7. cancel: function(){
8. alert('Canceled!')
9. }
10. });

Goto twitter

1. // binding to an element
2. $('a.twitter').confirm();
3. // or
4. $('a.twitter').confirm({ ... });
5. /*
6. NOTE: When binded to a Anchor tag as above, by default the confirm button will open the href link.
7. */

Show an modal dialog 
 $.dialog() Hides both confirm & cancel buttons. (Shows close [x] button)

example dialog

 

1. $.dialog({
2. title: 'Text content!',
3. content: 'Simple modal!',
4. });

Examples

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.$b is the body div for jquery-confirm. You can find and alter any element at run time.

BUTTON TEXT

Change the button text for confirm and cancel.

click me!

 

1. $.confirm({
2. confirmButton: 'Yes i agree',
3. cancelButton: 'NO never !'
4. });

BUTTON STYLE

Apply the classes you want in the buttons.

Available bootstrap options are btn-primary btn-inverse btn-warning btn-info btn-danger btn-success

info and danger! warning and success!

 

1. $.confirm({
2. confirmButtonClass: 'btn-info',
3. cancelButtonClass: 'btn-danger'
4. })

HIDE ELEMENTS.

Hide the Title/Content/Confirm Button/Cancel Button/Close icon when u don't need them.

No title No content No title/cancel Button No title/cancel/confirm Button No title/cancel/confirm Button + no close icon

 

1. $.confirm({
2. title: false, // hides the title.
3. cancelButton: false // hides the cancel button.
4. confirmButton: false, // hides the confirm button.
5. closeIcon: false, // hides the close icon.
6. content: false, // hides content block.
7. });

NOTE:

By default the closeIcon is visible if both confirm & cancel buttons are hidden. (dialog mode).
To explicitly show or hide closeIcon set closeIcon: true or closeIcon: false.
Shorthand to hide both buttons is to use $.dialog().

THEME

The Light & Dark themes that suit any website design,

Supervan Light theme Dark theme HoloLight theme HoloDark theme

 

1. $.confirm({
2. theme: 'white'
3. });
4. $.confirm({
5. theme: 'black'
6. });
7. $.confirm({
8. theme: 'hololight'
9. });
10. $.confirm({
11. theme: 'holodark'
12. });
13. $.confirm({
14. theme: 'supervan'
15. });

CUSTOM WIDTH

Jquery-confirm uses bootstrap's grid system for its layout. 
You can simply provide column classes to adjust the modal's width.

You can also set responsive layouts. Bootstrap grid docs

col-md-6 col-md-offset-3 col-md-4 col-md-offset-4 (default) col-md-4 col-md-4 col-md-offset-8 col-md-12

 

1. $.confirm({
2. columnClass: 'col-md-4 col-md-offset-4'
3. });
4. $.confirm({
5. columnClass: 'col-md-4'
6. });
7. $.confirm({
8. columnClass: 'col-md-4 col-md-offset-8 col-xs-4 col-xs-offset-8'
9. });

LOAD VIA URL

Get content from a file/url.
Prepend URL: to your URL. The URL will be called with the get ajax method. 
Example content: "URL:http://example.com/getData?id=1"

The confirm/cancel buttons are disabled until the content is fetched from the URL.

You can also load HTML contents to the modal with ease.

Load from text.txt Using contentLoaded (optional) view text.txt

 

1. $.confirm({
2. content: 'url:text.txt',
3. title: 'Title'
4. });
6. // Using contentLoaded callback.
7. $.confirm({
8. content: 'url:text.txt',
9. title: 'Title',
10. contentLoaded: function(data, status, xhr){
11. var that = this;
12. setTimeout(function(){
13. that.setContent('Changed content after timeout: '+status);
14. }, 1000);
15. }
16. });

contentLoaded is called regardless of success or error.

LOAD VIA URL (Advanced Option)

Get full control over Ajax calls and its callbacks. 
Pass a function that returns jquery ajax promise. i.e. $.get(), $.post(), $.ajax(), etc.

$obj is the reference object to jconfirm, and provides set of methods.

Load from bower.json Error it my way view bower.json

 

1. $.confirm({
2. content: function ($obj) {
3. return $.ajax({
4. url: 'bower.json',
5. dataType: 'json',
6. success: function (data) {
7. $obj.setContent('Plugin description: '+data.description); // sets the content and centers the dialog on screen.
8. // Ahh, success!
9. },
10. error: function () {
11. $obj.contentDiv.html("Something went wrong, please try again later."); // sets the content straightaway.
12. // Handle it your way
13. }
14. });
15. },
16. confirm: function(){
17. // here this.content is the current content overwritten everytime new content is set.
18. this.setContent(this.content+'<h4>Adding a new sentence.</h4>');
19. return false;
20. }
21. });

ANIMATION!

All the impression lies in what we see.
Lots and lots of animations

2D animations:

right left bottom top Rotate none opacity

 

3D animations:

scale (default) zoom scaleY scaleX RotateY RotateX

 

1. $.confirm({
2. animation: 'zoom',
3. closeAnimation: 'scale'
4. });
5. // Available animations: right, left, bottom, top, rotate, none, opacity, scale, zoom, scaley, scalex, rotatey, rotatex

see options for list of options you can apply.

ANIMATION BOUNCE

Some eye candy thats in fashion.

No bounce 1.5 bounce 2 bounce 2.5 bounce

 

1. $.confirm({
2. animationBounce: 1.5, // default is 1.2 whereas 1 is no bounce.
3. });

ANIMATION SPEED

Adjust the duration of animation.

I'm too Late I'm too Quick

 

1. $.confirm({
2. animationSpeed: 2000 // 2 seconds
3. });
4. $.confirm({
5. animationSpeed: 200 // 0.2 seconds
6. });

AUTO-CLOSE

Do a action if the user does not respond of specified time. 
The autoClose option takes in a string, like 'confirm|4000' where confirm is the action to trigger after 4000 milliseconds. 
 Practical examples of autoClose

Auto Cancel. Auto Confirm.

 

1. $.confirm({
2. title: 'Delete user?',
3. content: 'This dialog will automatically trigger \'cancel\' in 6 seconds if you don\'t respond.',
4. autoClose: 'cancel|6000',
5. confirm: function(){
6. alert('confirmed');
7. },
8. cancel:function(){
9. alert('canceled');
10. }
11. });
13. $.confirm({
14. title: 'Logout?',
15. content: 'Your time is out, you will be automatically logged out in 10 seconds.',
16. autoClose: 'confirm|10000',
17. confirm: function(){
18. alert('confirmed');
19. },
20. cancel:function(){
21. alert('canceled');
22. }
23. });

ICONS

Give meaning to your dialog with custom icons.
Read about Font Awesome here.

Using bootstrap's glyphicon Using font-awesome Animated font-awesome

 

1. $.confirm({
2. icon: 'glyphicon glyphicon-heart',
3. title: 'glyphicon'
4. });
5. $.confirm({
6. icon: 'fa fa-warning',
7. title: 'font-awesome'
8. });
9. $.alert({
10. icon: 'fa fa-spinner fa-spin',
11. title: 'Working!',
12. content: 'Sit back, we are processing your request. <br>The animated icon is provided by Font-Awesome!'
13. });

BACKGROUND DISMISS

By default the 'cancel' action is trigged if the user click outside of the dialog.

With backgroundDismiss Without backgroundDismiss

 

1. $.confirm({
2. backgroundDismiss: true,
3. content: 'Click outside the dialog'
4. });
5. $.confirm({
6. backgroundDismiss: false,
7. content: 'Click outside the dialog'
8. });

KEYBOARD ACTIONS

Enables keyboard events on jquery-confirm dialog. 
ENTER calls confirm(); & ESC calls cancel();

Keyboard Enabled

 

1. $.confirm({
2. keyboardEnabled: true,
3. content: 'Press ESC or ENTER to see it in action.',
4. cancel: function(){
5. alert('canceled');
6. },
7. confirm: function(){
8. alert('confirmed');
9. }
10. });

CALLBACKS

If you have a form inside your modal, you'll probably need to attach events to it.

Most used to interact with the elements inside the modal.

With Callbacks

 

1. $.confirm({
2. content: 'Imagine this is a complex form and you have to attach events all over the form or any element <br><button type="button" class="examplebutton">I\'m alive!</button>',
3. onOpen: function(){
4. alert('after the modal is opened');
5. // find the input element and attach events to it.
6. // NOTE: `this.$b` is the jquery-confirm's content DIV.
7. this.$b.find('button.examplebutton').click(function(){
8. alert('You clicked on me!');
9. });
10. },
11. onClose: function(){
12. alert('before the modal is closed');
13. },
14. onAction: function(action){
15. alert(action + ' was clicked');
16. }
17. });

GLOBAL DEFAULTS

You can setup global settings for your jconfirm.

jconfirm.defaults should be set after the plugin has loaded.

1. jconfirm.defaults = {
2. title: 'Hello',
3. content: 'Are you sure to continue?',
4. contentLoaded: function(){
5. },
6. icon: '',
7. confirmButton: 'Okay',
8. cancelButton: 'Cancel',
9. confirmButtonClass: 'btn-default',
10. cancelButtonClass: 'btn-default',
11. theme: 'white',
12. animation: 'zoom',
13. closeAnimation: 'scale',
14. animationSpeed: 400,
15. animationBounce: 1.2,
16. keyboardEnabled: false,
17. rtl: false,
18. confirmKeys: [13, 32], // ENTER or SPACE key
19. cancelKeys: [27], // ESC key
20. container: 'body',
21. confirm: function () {
22. },
23. cancel: function () {
24. },
25. backgroundDismiss: true,
26. autoClose: false,
27. closeIcon: null,
28. columnClass: 'col-md-6 col-md-offset-3',
29. onOpen: function(){
30. },
31. onClose: function(){
32. },
33. onAction: function(){
34. }
35. };

RTL Support

If you need to show the confirm box in rtl then you should set the rtl option to true.

Try RTL

 

1. $.alert({
2. title: 'پیغام',
3. content: 'این یک متن به زبان شیرین فارسی است',
4. confirmButton: 'تایید',
5. cancelButton: 'انصراف',
6. confirmButtonClass: 'btn-primary',
7. closeIcon: true, // close icon will be moved to left if RTL is set to true.
8. rtl: true,
9. confirm: function () {
10. alert('تایید شد.');
11. }
12. });

OPTIONS

Options, their defaults and possibilities.

Name	type	default	description
title	String	'Hello'	Title of the dialog.
content	String, Function	'Are you sure to continue?'	Content for the dialog.  Or use a function that returns Ajax promise.
contentLoaded	function	function(){}	(optionally available) If you load content via URL using 'url:http://abc.com/xyz', contentLoaded will be the callback.
icon	String	''	Icon class prepended before the title.
confirmButton	String	'Okay'	Button text for the confirm callback.
cancelButton	String	'Cancel'	Button text for the cancel callback.
confirmButtonClass	String	'btn-default'	Class for the confirm button.
cancelButtonClass	String	'btn-default'	Class for the cancel button.
theme	String	'white'	Color theme for the dialog. possible options are 'white' & 'black'
animation	String	'zoom'	The Open animation for the dialog. possible options are 'scale', 'top', 'bottom', 'left', 'right', 'zoom', 'opacity', 'none', 'rotate', 'rotatex', 'rotatey', 'scalex', 'scaley'.  The 'blur' animation was removed in v1.1.2
closeAnimation	String	'scale'	The close animation for the dialog.
animationSpeed	Number	400	Animation duration in miliseconds.
animationBounce	Float	1.5	Adds a Bounce open animation,  1 = No bounce
keyboardEnabled	Boolean	false	Use the ENTER key to trigger the confirm action and ESC key to trigger the cancel action.
confirmKeys	Array	[13, 32]	When using `keyboardEnabled`, an array of keys that should trigger confirm. Default 13,32 // Enter & Space keys respectively.
cancelKeys	Array	[27]	When using `keyboardEnabled`, an array of keys that should trigger cancel. Default 27 // Esc key.
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>.
confirm	Function	function(){}	function to run after the user clicks the confirm button.
cancel	Function	function(){}	function to run after the user clicks the cancel button.
backgroundDismiss	Boolean	true	if the user can dismiss the dialog via clicking outside the dialog.
autoClose	String	false	Auto-close the dialog within a specified time, if the user doesn't respond. possible option 'confirm|400' the string is divided in two halves with '|', the first part specifies the button to trigger, 'confirm' or 'cancel'. The other half specifies the wait time in miliseconds.
closeIcon	Boolean	null	By default closeIcon is visible if both buttons are false. (dialog mode).  closeIcon can be shown by setting this value to a Boolean value.
columnClass	String	'col-md-6 col-md-offset-3'	Provides a better way to set Custom width to Jquery-onfirm. You can also set custom widths for different display sizes using the Bootstraps grid.
onOpen	Function	function(){}	This function is triggered when the jquery-confirm element is rendered. (After the popup is displayed)
onClose	Function	function(){}	This function is triggered when the modal is closed.
onAction	Function	function(){}	This function is triggered when any of the action performed, ie. confirm/cancel/closeicon click.

RETURNED OBJECT & METHODS

The function var obj = $.confirm() returns a reference object on execution. 
This obj can be used to interact with the opened dialog.

var obj = $.confirm({title: 'awesome'}); // initial execution

obj.$b & obj.contentDiv

The $b object is a jQuery DOM reference to the dialog. You can access your Dialogs contents via this object.

var obj = $.confirm({
    title: 'awesome',
    content: '<span class="styled">Yeah, this is awesome</span>'
})

var finding = obj.$b.find('.styled').html();
console.log(finding);
// Yeah, this is awesome

var contentBlock = obj.contentDiv.html();
console.log(contentBlock);
// <span class="styled">Yeah, this is awesome</span>

obj.close()

The close method closes/destroys the dialog.

var obj = $.confirm({
    ....
})
// Reference object is stored in 'obj', and the dialog opens on execution!

obj.close();
// The dialog is closed/destroyed.

obj.isClosed()

Tells if the dialog is closed or not. 
Returns TRUE if closed else returns FALSE,

obj.setContent('text to set')

Overwrites the content in the dialog and centers the dialog on screen.

obj.setDialogCenter()

Centers the dialog on screen.

INSIDE CALLBACKS

Getting the reference object inside callback functions

You may need the returned reference obj inside the callback function, this is what you need.

var obj = $.confirm({
    title: 'awesome',
    content: 'Get me yeah.',
    confirm: function(){
        console.log(this.content);
        // Get me yeah.
    }
})

console.log(obj.content);
// Get me yeah.

// Moral, `this` within the callback function is the returned object on execution.

Preventing the dialog from closing

At times you need the content inside dialog be validated, (For example, If you have a form inside, and the fields are required). You can prevent the modal close by simply doing return false;

var obj = $.confirm({
    title: 'awesome',
    content: 'Your name: <input type="text" />', // You can also LOAD the html data using LOAD FROM URL feature,
    confirm: function(){

        var val = this.$b.find('input').val();
        // there is a input element inside the content.

        if(val == ''){
        // if the value is empty, dont close the dialog. (and maybe show some error.)

            return false;
        }

    }

    // NOTE: You can return any falsy value to prevent close (such as '', null, undefined, 0).
});