jquery confirm3

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

        一、用法示例

        alert（警告栏）示例：

1. $.alert({
2. title: "Alert!",
3. content: "Simple alert!",
4. });

        confirm（操作选项）示例：

1. $.confirm({
2. title: "Confirm!",
3. content: "Simple confirm!",
4. buttons: {
5. confirm: function () {
6. $.alert("Confirmed!");
7. },
8. cancel: function () {
9. $.alert("Canceled!");
10. },
11. somethingElse: {
12. text: "Something else",
13. btnClass: "btn-blue",
14. keys: ["enter", "shift"],
15. action: function(){
16. $.alert("Something else?");
17. }
18. }
19. }
20. });

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

1. $.confirm({
2. title: "Prompt!",
3. content: "" +
4. "<form action="" class="formName">" +
5. "<div class="form-group">" +
6. "<label>Enter something here</label>" +
7. "<input type="text" placeholder="Your name" class="name form-control" required />" +
8. "</div>" +
9. "</form>",
10. buttons: {
11. formSubmit: {
12. text: "Submit",
13. btnClass: "btn-blue",
14. action: function () {
15. var name = this.$content.find(".name").val();
16. if(!name){
17. $.alert("provide a valid name");
18. return false;
19. }
20. $.alert("Your name is " + name);
21. }
22. },
23. cancel: function () {
24. //close
25. },
26. },
27. onContentReady: function () {
28. // bind to events
29. var jc = this;
30. this.$content.find("form").on("submit", function (e) {
31. // if the user submits the form by pressing enter in the field.
32. e.preventDefault();
33. jc.$$formSubmit.trigger("click"); // reference the button and click it
34. });
35. }
36. });

      dialog（对话框）示例：

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

 

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

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

     三、ajax模式

1. $.confirm({
2. content: function () {
3. var self = this;
4. return $.ajax({
5. url: "bower.json",
6. dataType: "json",
7. method: "get"
8. }).done(function (response) {
9. self.setContent("Description: " + response.description);
10. self.setContentAppend("<br>Version: " + response.version);
11. self.setTitle(response.name);
12. }).fail(function(){
13. self.setContent("Something went wrong.");
14. });
15. }
16. });

     四、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 "|", 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

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.