jquery confirm3

        jquery confirm3是一个功能十分强大的确认对话框插件。有以下几种模式：alert,confirm（promp），dialog。

        一、用法示例

        alert（警告栏）示例：

$.alert({
    title: 'Alert!',
    content: 'Simple alert!',
});

        confirm（操作选项）示例：

$.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?');
            }
        }
    }
}); 

       prompt（提示用户输入）示例：

$.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（对话框）示例：

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

 

     二、alert，confirm，dialog简便用法：

$.alert('Content here', 'Title here'); 
$.confirm('A message', 'Title is optional'); 
$.dialog('Just to let you know'); 

     三、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 TypeDefaultDescriptiontitleString, Function'Hello'Title of the dialog.
Also accepts a function that returns a string.titleClassString''Class that will be applied to the title.typeString'default'Colors the modal to give the user a hint of success/failure/warning,
available options are: 'blue, green, red, orange, purple & dark'typeAnimatedBooleantrueAdds a little animation to the colors.draggableBooleantrueMakes 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.dragWindowGapNumber15Draggable gap between the modal and window, defaults to 15pxdragWindowBorderBooleantrueIf the modal should be restricted inside the windowanimateFromElementBooleantrueAnimates the modal from the clicked elementalignMiddleBooleantrueIMPORTANT @deprecated The model will be position in center of the screen. When the content in the model changes, the model is reposition itself.smoothContentBooleantrueSmooth height transition when content in modal changes.contentString, Function'Are you sure to continue?'Content for the dialog.
Accepts functions that return string or ajax promise.contentLoadedFunctionfunction(data,status,xhr){}In use only when content is loaded via Ajax. is called on always callback of $.ajaxbuttonsObject{}Multiple definition of buttons
please see button definition for button propertiesiconString''Icon class prepended before the title. ex: 'fa fa-icon'lazyOpenBooleanfalseDoes not open the modal instantly.
requires to call the open() function to open the modalbgOpacityFloatnullif null, the theme's default bg opacity is applied.themeString'light'Color theme for the dialog.
possible options are 'light', 'dark', 'material' & 'bootstrap'animationString'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.2closeAnimationString'scale'The close animation for the dialog. Same options as animation.animationSpeedNumber400Animation duration in milliseconds.animationBounceFloat1Adds a Bounce open animation,
1 = No bounceescapeKeyBoolean, Stringfalseif false, escapeKey wont work,
if true, will work, but no callbacks,
if string, will be assigned to button.rtlBooleanfalseUse the Right to left text layout.containerString'body'Specify where the generated HTML content for jconfirm should append.
By default it appends in the document's <body>.containerFluidBooleanfalseIf true, will use the container-fluid layout, to use the full browser width.backgroundDismissBoolean, String, FunctionfalseIf 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.backgroundDismissAnimationString'shake'Animation to perform to grab the user's attention when user clicks out of the box.autoCloseStringfalseAuto-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.

closeIconBooleannullBy default closeIcon is visible if both buttons are false. (dialog mode).
closeIcon can be shown by setting this value to true.closeIconClassStringfalseBy default jQuery confirm uses × html entity for this close symbol. You can provide icon class here to change it.watchIntervalNumber100Watch the modal for changes and is centered on screen.
Added in v 2.5.0columnClassString'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.useBootstrapBooleantrueif 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.boxWidthString'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,scrollToPreviousElementBooleantrueScroll back to the element that was focused before jconfirm model opened.scrollToPreviousElementAnimateBooleantrueAnimates the scroll to previous element.offsetTopNumber40The model will maintain at least 50px from the window's top.offsetBottomNumber40The model will maintain at least 50px from the window's bottom.bootstrapClassesobject{ 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.onContentReadyFunctionfunction(){}is called when the content is put in DOM and the modal is open. (When the modal is completed ready.)onOpenBeforeFunctionfunction(){}is called when the modal is going to be opened.onOpenFunctionfunction(){}is called when the modal has finished opening.onCloseFunctionfunction(){}is called when the modal is going to be closed.onDestroyFunctionfunction(){}is called after the modal element is removed from the DOM.onActionFunctionfunction(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.