Dialog dialog box functionality in the JQuery UI Library uses full resolution _jquery

dialog box (dialog) is a very important feature of the jquery UI. It completely replaces JavaScript.
Alert (), prompt () and other methods, also avoids the new window or the complex redundancy of the page.

A Open Multiple Dialog
This can be done as long as you set a different ID.

$ (' #x '). dialog (); 
$ (' #y '). dialog (); 

Two Modify Dialog Style
in the Pop-up Dialog dialog box, open Firebug in Firefox or right-click-> to view
Elements. You can look at the dialog style and modify the background of the dialog title.

Do not need to modify the UI CSS, directly replace with Style.css 
. Ui-widget-header { 
 
  Background:url (. /img/xxx.png); 
 
} 

Three Properties of the dialog () method
there are two forms of dialog box methods: 1.dialog (Options), and options are in the form of object-key-value pairs
argument, each key-value pair represents an option; 2.dialog (' action ', param), action is operation on
The string of the Word box method, param is an option for options.

Dialog appearance options

Property	Default value/Type	Description
Title	No/String	The title of the dialog box, which can be set directly on the DOM element
Buttons	None/Object	Adds a button to the dialog, using the object-key-value alignment. Key is a button Name, and the value is the callback function that is invoked after the user clicks

$ (' #reg '). Dialog ({ 
 
 title: ' Register ', 
 
 buttons: { 
 
   ' button ': function () {} 
 
 } 
 
); 

Dialog page position options

Property	Default value/Type	Description
Position	center/string	Sets the coordinate position of a dialog window, which defaults to center. Other setting values are: Left top, top right, bottom left, Right bottom (Four Corners), top, bottom (tops or bottoms) , center width, left or right, height Center), Center (default)

$ (' #reg '). dialog ({ 
 
  position: ' Left Top ' 
 
}); 

Dialog size Option

Property	Default value/Type	Description
Width	300/value	The width of the dialog box. The default is 300, and the unit is pixel.
Height	auto/value	The height of the dialog box. The default is auto and the unit is pixel.
MinWidth	150/value	The minimum width of the dialog box. The default is 150, in pixels.
MinHeight	150/value	The minimum height of the dialog box. The default is 150, in pixels.
MaxWidth	auto/value	The maximum width of the dialog box. Default auto, the unit is pixel.
MaxHeight	auto/value	The maximum height of the dialog box. Default auto, the unit is pixel.

$ (' #reg '). Dialog ({ 
 
  height:500, 
 
  width:500, 
 
  minwidth:300, 
 
  minheight:300, 
 
  maxwidth:800 
 
  , maxheight:600 
 
}); 

Dialog Visual options

Property	Default value/Type	Description
Show	false/Boolean value	When you display a dialog box, the fade effect is the default.
Hide	False Boolean value	When you close the dialog box, the fade effect is used by default.

$ (' #reg '). Dialog ({ 
 
  show:true, 
 
  hide:true 
 
}); 

Note: When you set true, the default is fade, and if you want to use a different effect, you can use the string parameters in the table below.

Show and hide optional effects

Effect Name	Description
Blind	dialog box appears or disappears from the top
Bounce	dialog box shows or disappears intermittently, vertical motion
Clip	dialog box to show or disappear vertically from the center
Slide	The dialog box appears or disappears from the left
Drop	dialog box appears or disappears from the left, with transparency changes
Fold	The dialog box appears or disappears from the top left corner
Highlight	dialog box shows or disappears with transparency and background color changes
Puff	The dialog box is scaled from the center. "Shrink" when displayed, "grow" when it disappears
Scale	The dialog box is scaled from the center. "Grow" when displayed, "shrink" when it disappears
Pulsate	dialog box to show or disappear in blinking form

$ (' #reg '). Dialog ({Show 
 
  : ' Blind ', 
 
  Hide: ' Blind ' 
 
}); 

dialog Behavior Options

Property	Default value/Type	Description
AutoOpen	true/Boolean value	The default is true, and the dialog box opens when the dialog () method is invoked. If False, the dialog box is not visible, but the dialog box is created to To be visible by dialog (' Open ').
Draggable	true/Boolean value	The default is true, you can move the dialog box and false cannot be moved.
Resizable	true/Boolean value	The default is true, you can resize the dialog box, false cannot be adjusted
Modal	false/Boolean value	The default is False, the dialog box is operable, and the true dialog box masks A layer of gray yarn, unable to operate.
Closetext	No/String	Set the title text of the Close button

$ (' #reg '). Dialog ({ 
 
  autoopen:false, 
 
  draggable:false, 
 
  resizable:false, 
 
  modal:true, 
 
  closetext : ' Close ' 
 
}); 

Four Events for the dialog () method
In addition to property settings, the dialog () method also provides a large number of events. These events can give a variety of different states
Provides a callback function when the The This value in these callback functions equals the Div object of the dialog box content, not the entire dialog box
The Div.

dialog Event Options

Event name	Description
Focus	When the dialog box is activated (first display and click on it each time) Call the focus method, which has two parameters (event, UI). In this event The UI parameter is empty.
Create	The Create method is called when the dialog box is created, which has two parameters Number (event, UI). The UI parameter in this event is empty.
Open	When the dialog box is displayed (first display or call dialog (' Open ') method) Calls the Open method, which has two parameters (event, UI). This event The UI parameter in is empty.
BeforeClose	When the dialog box is about to close (when you click the Close button or call dialog (' Close ') method), the BeforeClose method is invoked. If the letter Number returns False, the dialog box will not be closed. The closed dialog box can be Re-open With dialog (' Open '). The method has two parameters (event, UI). The UI parameter in this event is empty.
Close	When the dialog box is about to close (when you click the Close button or call dialog (' Close ') method, the Close method is called. The closed dialog box can be To reopen with dialog (' Open '). The method has two parameters (event, UI). The UI parameter in this event is empty.
Drag	When a dialog box is moved, the drag method is invoked each time a move is moved. The Method has two parameters. The method has two parameters (event, UI). This event The UI in has two Property objects: 1.position, get the currently moving coordinates, there are two child properties: top and Left 2.offset, get the currently moving coordinates, with two child properties: top and left.
DragStart	When you start to move the dialog box, the DragStart method is invoked. The method has Two parameters (event, UI). The UI in this event has two Property objects: 1.position, get the currently moving coordinates, there are two child properties: top and Left 2.offset, get the currently moving coordinates, with two child properties: top and left.
DragStop	When you start to move the dialog box, the DragStop method is invoked. The method has Two parameters (event, UI). The UI in this event has two Property objects: 1.position, get the currently moving coordinates, there are two child properties: top and Left 2.offset, get the currently moving coordinates, with two child properties: top and left.
Resize	method. The method has two parameters (event, UI). The UI in this event has four Property objects: 1.size, gets the size of the dialog box, has two child properties: Width and height. 2.position to get the coordinates of the dialog box with two child properties: top and left. 3.originalSize to get the original size of the dialog box with two child properties: width and height. 4.originalPosition to get the original coordinates of the dialog box, with two sub sex: Top and left.
resizestart	two parameters (event, UI). The UI in this event has four Property objects: 1.size, gets the size of the dialog box, has two child properties: Width and height. 2.position to get the coordinates of the dialog box with two child properties: top and left. 3.originalSize to get the original size of the dialog box with two child properties: width and height. 4.originalPosition to get the original coordinates of the dialog box, with two sub sex: Top and left.
Resizestop	When you end the drag dialog, the Resizestart method is invoked. The method has Two parameters (event, UI). The UI in this event has four property objects: 1.size, to get the size of the dialog box, there are two child properties: Width and Height 2.position, get the coordinates of the dialog box, with two attributes: Top and left. 3.originalSize, to get the original size of the dialog box, there are two child properties: Width and height. 4.originalPosition, get the original coordinates of the dialog box, with two sub genera Sex: Top and left.

When the dialog box gets the focus $ (' #reg '). Dialog ({focus:function (E, UI) {alert (' Get Focus '); 
 
} 
 
}); 
 
  When the dialog box is created $ (' #reg '). Dialog ({create:function (E, UI) {alert (' Create dialog box '); 
 
} 
 
}); When the $ (' #reg ') is about to be closed. Dialog ({beforeclose:function (E, UI) {alert (' What to do before closing!) 
 
   '); 
 
  return flag; 
 
} 
 
}); When closing the dialog box $ (' #reg '). Dialog ({close:function (E, UI) {alert (' Off! 
 
  '); 
 
} 
 
}); The dialog box moves $ (' #reg '). Dialog ({drag:function (E, UI) {alert (' top: ' + ui.position.top + ' \ n ' + ' left 
 
  : ' + ui.position.left); 
 
} 
 
}); 
 
        $ (' #reg ') when the dialog box begins to move. Dialog ({dragstart:function (E, UI) {alert (' top: ' + ui.position.top + ' \ n ') 
 
  + ' Left: ' + ui.position.left); 
 
} 
 
});  $ (' #reg ') when the dialog box ends moving. dialog ({dragstop:function (E, UI) {alert (' top: ' + ui.position.top + ' \ n ' + 
 
  ' Left: ' + ui.position.left); 
 
} 
 
}); 
 
 When resizing the dialog box $ (' #reg '). Dialog ({resize:function (E, UI) {  Alert (' Size: ' + ui.size.width + ' \ n ' + ' originalsize: ' + ui.originalSize.width '); 
 
} 
 
}); 
 
        When you start resizing the dialog box $ (' #reg '). Dialog ({resizestart:function (E, UI) {alert (' Size: ' + ui.size.width + ' \ n ') 
 
  + ' originalsize: ' + ui.originalSize.width); 
 
} 
 
}); 
 
        End Resizing dialog box $ (' #reg '). Dialog ({resizestop:function (E, UI) {alert (' Size: ' + ui.size.width + ' \ n ') 
 
  + ' originalsize: ' + ui.originalSize.width); 
 } 
 
});

dialog (' Action ', param) method

Method	return value	Description
Dialog (' Open ')	JQuery objects	Open a dialog box
dialog (' Close ')	JQuery objects	Close the dialog box
Dialog (' Destroy ')	JQuery objects	Delete the dialog box and directly block the dialog
Dialog (' IsOpen ')	Boolean value	To determine whether a dialog box is open
Dialog (' widget ')	JQuery objects	Get the JQuery object for the dialog box
Dialog (' option ', param)	General value	Get the value of the Options property
Dialog (' option ', param, value)	JQuery objects	Set the value of the Options property

Initial hidden dialog box 
$ (' #reg '). Dialog ({ 
 
  autoopen:false 
 
}); 
 
Open the dialog box 
$ (' #reg_a '). Click (function () { 
 
  $ (' #reg '). Dialog (' Open '); 
 
}; 
 
Closes the dialog box 
$ (' #reg '). Click (function () { 
 
  $ (' #reg '). Dialog (' Close '); 
 
}); 
 
The decision dialog box opens or closes the status 
$ (document). Click (function () { 
 
  alert ($ (' #reg '). Dialog (' IsOpen ' 
 
)); The specified dialog box is placed before 
$ (document). Click (function () { 
 
  $ (' #reg '). Dialog (' Movetotop '); 
 
}); 
 
Gets the value of the Param option for a options 
var title = $ (' #reg '). Dialog (' option ', ' title '); 
 
Alert (title); 
 
 
Sets the value of the Param option for a certain options 
$ (' #reg '). Dialog (' option ', ' title ', ' Register '); 

Five Use on () in dialog
in dialog events, an event method that is handled using the on () method is provided.

A dialog box event triggered by the On () method

Effect Name	Description
Dialogfocus	Trigger when focus is received
Dialogopen	triggered when displayed
Dialogbeforeclose	Triggered when it is going to close
Dialogclose	triggered when off
Dialogdrag	Triggered every time you move
Dialogdragstart	Trigger when start move
Dialogdragstop	Trigger after move ends
Dialogresize	Fires each time the size is resized
Dialogresizestart	Trigger when resizing starts
Dialogresizestop	Triggering when resizing is finished

$ (' #reg '). On (' Dialogclose ', function () { 
 
  alert (' Close '); 
 
});