JQuery UI Dialog parameter description

Some time ago, there was a problem. jquery UI dialog pop-up layer pops up a plurality of layers, such as a pop up two layers A and b b layer if the data table shown is too large to reach the outside of the a layer, the part that extends beyond the A is not visible, because B layer is the size of a layer on the B is limited by a

So I found this information and saved it.

-----------------------------------------------------------------------------------------------------

Initialize parameters

For dialog, initialization is required first, and when the dialog function is called, if no arguments are passed, or if an object is passed, then a dialog box is initialized.

There is no parameter, which means that the following properties are supported in the current version of the JQuery UI 1.8.9, which is based on the default Settings initialization dialog box.

AutoOpen If the dialog box is displayed immediately after initialization, the default is True

Modal whether the modal dialog box defaults to False

Closeonescape whether the dialog box should be closed after the user presses the ESC key, which defaults to True

Draggable whether to allow drag, default to True

Resizable the size of the dialog box can be adjusted by default to True

The title of the title dialog box, which can be an HTML string, such as a hyperlink.

Position is used to set the location of the dialog box, there are three ways to set

1. A string that allows the value to be ' center ', ' left ', ' right ', ' top ', ' bottom '. The default value for this property is ' center ', which means that the dialog box is centered.
2. An array containing two locations in pixels, for example, var dialogopts = {
Position: [100, 100]
};

3. A string consisting of an array, for example, [' Right ', ' top ', indicating that the dialog box will be located in the upper-right corner of the window. var dialogopts = {
Position: ["left", "bottom"]
};

A set of properties on dimensions, in pixels.

width, default 300

Height, default ' auto '

MinWidth minimum width, default 150

MinHeight minimum height, default 150

MaxWidth Maximum width

MaxHeight Maximum Height

And about the effect of closing.

Hide when the dialog box is closed, the default is null, for example, hide: ' Slide '

Show the effect when the dialog box is open. Default is NULL

Stack

Whether the Stack dialog box is stacked on top of other dialog boxes. Default is True

ZIndex the Z-index value of the dialog box, an integer, the larger the more on top. Default 1000

Button

Buttons an object, the property name is used as the prompt text of the button, and the property value is a function, that is, the button's handler function. var dialogopts = {
Buttons: {
"OK": function () {},
"Cancel": Function () {}
}
}
$ ("#myDialog"). Dialog (dialogopts);

IE6 Select element penetration problem

Bgiframe solves the IE6 select element penetration problem by adding an IFRAME. Default is True

This feature requires the use of script jquery.bgiframe-2.1.2, where the script is in the Development-bundle/external folder in the jquery UI compression package and needs to be added to the page. < script src = ".. /jquery-1.4.4.js "></script>
< script src = ".. /external/jquery.bgiframe-2.1.2.js "></script>
< script src = ".. /ui/jquery.ui.core.js "></script>

This control now has a bug, in the case of the popup window has a mask layer, under Chrome, if there is a vertical scroll bar, you can not drag with the mouse, only use the scroll wheel.

The note above is from Wang Yang

Before setting

After setting

Example $ ("#dialog"). Dialog ({
Bgiframe:true,
Resizable:false,
height:140,
Modal:true,
Overlay: {
BackgroundColor: ' #000 ',
opacity:0.5
},
Buttons: {
' Delete all items in Recycle Bin ': function () {
$ (This). dialog (' Close ');
},
Cancel:function () {
$ (This). dialog (' Close ');
}
}
});

The effect is as follows.

Methods of the dialog box

After initialization, you can use the dialog box, such as open a dialog box, close the dialog box, which needs to be done by means of a dialog box.

The method of the dialog box needs to be done by calling the dialog function and passing the method in the form of a string. For example, dialog ("Open") represents the open method that invokes the dialog box.

Open opens the dialog box, it should be noted that there is no open () method, but is called by dialog ("Open"). For example,. dialog ("Open")

Close closes the dialog box $ (This). dialog (' Close ');

Destroy destroys a dialog box, removes the dialog box function, and restores the element to its pre-initialized state.

IsOpen checks the status of the dialog box and returns True if it is already open.

Movetotop Move the dialog box to the top of the dialog box

option sets or reads the value of a property in a dialog box, and there are two ways to use it.

If the second argument is a string, if three parameters are provided, the setting is indicated, if two parameters, the read is indicated. For example. dialog ("option", Optionname, [value])

If the second argument is an object, it indicates that multiple properties are set at once.

Enable dialog box

Disable events that Disable dialog Box dialog boxes

A variety of events are also triggered during dialog use, and we can customize the event handler to respond.

Create

Open

Focus

DragStart

Drag

DragStop

Resizestart

Resize

Resizestop

BeforeClose

Close

For example, the following sets the event handling for Open,close,beforeclose, which displays the State of the window. var dialogopts = {
Open:function () {
$ ("#status"). Find (". Ui-widget-content"). Text ("The dialog is open");
},
Close:function () {
$ ("#status"). Find (". Ui-widget-content"). Text ("The dialog is closed");
},
Beforeclose:function () {
if (parseint ($ (". Ui-dialog"). CSS ("width")) = = 300 | |
parseint ($ (". Ui-dialog"). CSS ("height")) = = 300) {
return False
}
}
};
$ ("#myDialog"). Dialog (dialogopts);

The effect is as follows

dialog box Use FAQ

A common problem is to initialize a dialog box multiple times.

The dialog box only needs to be initialized once, and multiple initializations can be problematic.