📅 最后修改于: 2020-11-27 01:58:04 🧑 作者: Mango
该对话框用于在HTML页面上很好地呈现信息。 jQuery UI对话框方法用于创建一个基本的对话框窗口，该窗口位于视口中并受页面内容的保护。它具有标题栏和内容区域，并且默认情况下可以使用“ x”图标进行移动，调整大小和关闭。
句法：
您可以通过两种形式使用对话()方法：
$(selector, context).dialog (options) Method
$(selector, context).dialog ("action", [params]) Method
$(selector, context).dialog (options) Method
dialog(options)方法指定您可以使用对话框形式的HTML元素。在这里，options参数是一个对象，用于指定该窗口的外观和行为。
句法：
$(selector, context).dialog(options);
您可以使用JavaScript对象一次使用一个或多个选项。如果有多个选项，则必须使用逗号将它们分开，如下所示：
$(selector, context).dialog({option1: value1, option2: value2..... });
以下是可与该方法一起使用的不同选项的列表：
| Option | Description |
|---|---|
| appendto | If you set this option to false, it will prevent the UI-draggable class from being added in the list of selected DOM elements. By default its value is true. |
| autoopen | If you set this option to true, the dialog box is opened upon creation. when false, the dialog box will be opened upon a call to dialog(‘open’). By default its value is true. |
| buttons | This option adds buttons in the dialog box. These are listed as objects, and each property is the text on the button. The value is a callback function called when the user clicks the button. By default its value is {}. |
| closeonescape | Unless you set this option to false, the dialog box will be closed when the user presses the escape key while the dialog box has focus. By default its value is true. |
| closetext | This option contains text to replace the default of close for the close button. by default its value is “close”. |
| dialogclass | If you set this option to false, it will prevent the UI-draggable class from being added in the list of selected dom elements. By default its value is “”. |
| draggable | you set this option to false, dialog box will be draggable by clicking and dragging the title bar. By default its value is true. |
| height | This option sets the height of the dialog box. By default its value is “auto”. |
| hide | This option is used to set the effect to be used when the dialog box is closed. By default its value is null. |
| maxheight | This option sets maximum height, in pixels, to which the dialog box can be resized. By default its value is false. |
| maxwidth | This option sets the maximum width to which the dialog can be resized, in pixels. By default its value is false. |
| minheight | This option is the minimum height, in pixels, to which the dialog box can be resized. By default its value is 150. |
| minwidth | This option is the minimum width, in pixels, to which the dialog box can be resized. By default its value is 150. |
| modal | If this option is set to true, the dialog will have modal behavior; other items on the page will be disabled, i.e., cannot be interacted with. modal dialogs create an overlay below the dialog but above other page elements. By default its value is false. |
| position | This option specifies the initial position of the dialog box. can be one of the predefined positions: center (the default), left, right, top, or bottom. can also be a 2-element array with the left and top values (in pixels) as [left,top], or text positions such as [‘right’,’top’]. by default its value is { my: “center”, at: “center”, of: window }. |
| resizeable | This option unless set to false, the dialog box is resizable in all directions. by default its value is true. |
| show | This option is an effect to be used when the dialog box is being opened. by default its value is null. |
| title | This option specifies the text to appear in the title bar of the dialog box. By default its value is null. |
| width | This option specifies the width of the dialog box in pixels. By default its value is 300. |
让我们以一个简单的示例来演示对话框功能的用法，该对话框功能不向dialog()方法传递任何参数。
jQuery UI Dialog functionality
"A boy's best friend is his mother."
使用按钮，标题和位置：
让我们以一个示例来演示对话框小部件中三个选项按钮，标题和位置的用法。
jQuery UI Dialog functionality
Are O Sambha:Kitna inaam rakhi hai re sarkar hum par.
隐藏，显示和身高的使用：
让我们以一个示例来演示隐藏，显示和高度这些选项的用法。
jQuery UI Dialog functionality
This is a dialog.
$(selector, context).dialog ("action", [params]) Method:
对话框(操作，参数)方法用于在对话框上执行操作，例如关闭对话框。该操作在第一个参数中指定为字符串，并且可以选择使用一个或多个参数(基于给定操作)一个或多个参数。
句法：
$(selector, context).dialog ("action", [params]);
以下是与此方法一起使用的操作的列表：
| Action | Description |
|---|---|
| close() | This action is used to close the dialog box. This method does not accept any arguments. |
| destroy() | This action is used to removes the dialog box completely. This will return the element back to its pre-init state. This method does not accept any arguments. |
| isOpen() | This action is used to check if the dialog box is open. This method does not accept any arguments. |
| moveToTop() | This action is used to allocate position to the corresponding dialog boxes to the foreground (on top of the others). This method does not accept any arguments. |
| open() | This action is used to opens the dialog box. This method does not accept any arguments. |
| option(optionName) | this action gets the value currently associated with the specified optionName. where optionName is the name of the option to get. |
| option() | This action gets an object containing key/value pairs representing the current dialog options hash. This method does not accept any arguments. |
| option(optionName,value) | This action sets the value of the dialog option associated with the specified optionName. |
| option( options) | This action sets one or more options for the dialog. |
| widget() | This action is used to return the dialog box?s widget element; the element annotated with the ui-dialog class name. This method does not accept any arguments. |
让我们以一个简单的示例来演示isOpen()，open()和close()方法的用法。
jQuery UI Dialog functionality
Click on the Toggle button to open and cose this dialog box.