Dialog attributes in jquery

The code is as follows:

$ (' #dialogDiv '). Dialog (
{
Hide:true,//Click Close is hidden, if not add this, close the pop-up window and then click on the error.
Autoopen:false,
height:380,
width:800,
Modal:true,//Mask (popup will affect page size)
Title: ' Bid-out person ',
Overlay: {opacity:0.5, background: "Black", overflow: ' Auto '},
buttons:{
' OK ': function () {
Treatment method AddUser ();
},
' Cancel ': function () {
Close Current Dialog
$ (This). dialog ("Close");
}
}
}
);
$ (' #addItems '). Click (function () {
LoadPage (' buildopeninggroupaddopering.htm ', ' #dialogDiv '); Dialog Memorize page
$ (window.parent.document). Find ("#projectSpaceContent. Show"). Height (600)//adjust current iframe height
$ (' #dialogDiv '). Data (' Title.dialog ', ' new bid opening person '). dialog (' Open '); Modify Title
return false;
})

function LoadPage (path,id) {
$.get (path, function (data) {
data = Data.replace (/<script.*>.*<\/script>/ig, ""); To remove a script tag
data = Data.replace (/<\/?link.*>/ig, ""); Removing link tags
data = Data.replace (/<\/?html.*>/ig, ""); Remove HTML tags
data = Data.replace (/<\/?body.*>/ig, ""); Removing body tags
data = Data.replace (/<\/?head.*>/ig, ""); Remove Head Tag
data = Data.replace (/<\/?! Doctype.*>/ig, ""); Remove DOCTYPE Tags
data = Data.replace (/<title.*>.*<\/title>/ig, ""); Remove title Tag
$ (ID). empty (). HTML (data);//empty Contentmain content and load HTML
});
}
Add a close button to the popup layer
$ ('. Ui-dialog-buttonpane '). Show (). empty ();
$ (' <button> close </button> '). Click (function () {
$ ("#dialogDiv"). Dialog (' Close ');
return false;
}). AppendTo ('. Ui-dialog-buttonpane ');

Let's look at an example first. In addition, if you want to drag, change the size of dialog to add Ui.draggble.js and Ui.resizable.js

Copy CodeThe code is as follows:
<! DOCTYPE html>
<link type= "Text/css" href= "Http://jqueryui.com/latest/themes/base/ui.all.css" rel= "stylesheet"/>
<script type= "Text/javascript" src= "Http://jqueryui.com/latest/jquery-1.3.2.js" ></script>
<script type= "Text/javascript" src= "Http://jqueryui.com/latest/ui/ui.core.js" ></script>
<script type= "Text/javascript" src= "Http://jqueryui.com/latest/ui/ui.dialog.js" ></script>

<script>
$ ("#dialog"). Dialog ({autoopen:false,buttons:{"OK": function () {$ (this). dialog ("Close");}},closeonescape:true, Hide: "Slide", Modal:true,title: "dialog Box"}). Dialog ("Open");
</script>

<div id= "Dialog" title= "dialog title" > You're a pig! </div>

1 Properties
1.11 AutoOpen, this property is true when dialog is invoked automatically when the dialog window is opened. When the property is False, a window is initially hidden and the dialog window appears when you know the. dialog ("Open"). The default is: TRUE.
1.12 Initialization Example: Note that $ ('. Selector ') is the class name of the dialog, in this case. selector= #dialoag, no longer explained.
$ ('. Selector '). dialog ({autoopen:false});
1.13 After initialization, get and set this attribute example:
Get
var AutoOpen = $ ('. Selector '). dialog (' option ', ' AutoOpen ');
Set up
$ ('. Selector '). dialog (' option ', ' AutoOpen ', false);

1.21 bgiframe default is False, when True, the Bgiframe plugin would be is used, to fix the issue in IE6 where select boxes Show on to P of other elements, regardless of zIndex. Requires including the Bgiframe plugin. Future versions require a separate plugin.
Under IE6, let the rear grey screen cover the Select.
1.22 Initialization Example:
$ ('. Selector '). dialog ({bgiframe:true});
1.23 after initialization, get and set:
Get
var bgiframe = $ ('. Selector '). dialog (' option ', ' bgiframe ');
Set up
$ ('. Selector '). dialog (' option ', ' Bgiframe ', true);

1.31 buttons displays a button and writes the text of the button, setting the button click function. The default is {}, there is no button.
The above example already has the use of the buttons attribute, please note.
1.32 Initialization Example:
$ ('. Selector '). Dialog ({buttons: {"OK": function () {$ (this). dialog ("Close");}});
1.33 after initialization, get and set:
Get
var buttons = $ ('. Selector '). dialog (' option ', ' buttons ');
Set up
$ ('. Selector '). dialog (' option ', ' buttons ', {"OK": function () {$ (this). dialog ("Close");});

1.41 Closeonescape is true, click on the keyboard ESC to close dialog, the default is true;
1.42 Initialization Example:
$ ('. Selector '). dialog ({closeonescape:false});
1.43 after initialization, get and set:
Get
var closeonescape = $ ('. Selector '). dialog (' option ', ' closeonescape ');
Set up
$ ('. Selector '). dialog (' option ', ' Closeonescape ', false);

1.51 Dialogclass type will be added to dialog, default is empty
1.52 Initialization Example:
$ ('. Selector '). Dialog ({dialogclass: ' alert '});
1.53 after initialization, get and set:
Get
var Dialogclass = $ ('. Selector '). dialog (' option ', ' dialogclass ');
Set up
$ ('. Selector '). dialog (' option ', ' Dialogclass ', ' alert ');

1.61 draggable, resizable:draggable Whether you can use the header to drag, the default is true, you can drag, resizable can change the size of dialog, by default, True, you can change the size.
1.62 Initialization Example:
$ ('. Selector '). dialog ({draggable:false,resizable:false});
1.63 after initialization, get and set:
Get
var draggable = $ ('. Selector '). dialog (' option ', ' draggable ');
Set up
$ ('. Selector '). dialog (' option ', ' draggable ', false);

1.71 width, height, dialog width and height, default to auto, Auto.
1.72 Initialization Example:
$ ('. Selector '). dialog ({height:530,width:200});
1.73 after initialization, get and set: Please refer to 1.63

1.81 maxWidth, MaxHeight, MinWidth, MinHeight, dialog can change the maximum width, maximum height, minimum width, minimum height. MaxWidth, maxheight The default is False, is unlimited. The default for MinWidth, MinHeight is 150. Ui.resizable.js support is required to use these properties.
1.82 Initialization Example:
$ ('. Selector '). dialog ({maxheight:400,maxwidth:600,minheight:300,minwidth:300});
1.83 after initialization, get and set: Please refer to 1.63

1.91 hide, Show, when dialog is turned off and turned on when the effect. Default is NULL, no effect
1.92 Initialization example: used in the top instance, please see for yourself.
1.93 after initialization, get and set: Please refer to 1.63

1.101 modal, whether the modal window is used, when the modal window is opened, the other elements of the page will not be clicked until the modal window is closed. The default is False is not a modal window.
1.102 Initialization Example: $ ('. Selector '). dialog ({modal:true});
1.103 after initialization, get and set: Please refer to 1.63

1.111 the title text of the Title,dialog, which is empty by default.
1.112 Initialization example: see the top instance. 1.113 after initialization, get and set: Please refer to 1.63

1.121 position, dialog display position: Can be ' center ', ' left ', ' right ', ' top ', ' bottom ', or the offset of top and left can also be an array of strings such as [' Right ', ' top ‘]。
1.122 Initialization Example: $ ('. Selector '). dialog ({position: [' top ', ' Right ']}); 1.123 after initialization, get and set: Please refer to 1.63

1.131 ZIndex, dialog, the ZIndex value, the default value is 1000.
1.132 Initialization Example: $ ('. Selector '). dialog ({zindex:3999}); 1.133 after initialization, get and set: Please refer to 1.63

1.141 stack The default value is true when dialog gets the focus, dialog will be on top.
1.142 Initialization Example: $ ('. Selector '). dialog ({stack:false}); 1.143 after initialization, get and set: Please refer to 1.63

2 Events
2.11 BeforeClose Type Dialogbeforeclose, this event will be triggered when Dialog tries to close, and if False is returned, the shutdown will be blocked.
2.12 Initialization Example: $ ('. Selector '). Dialog ({
Beforeclose:function (event, UI) {...}
});
2.13 Use type binding for this event Example: $ ('. Selector '). Bind (' Dialogbeforeclose ', function (event, UI) {
...
});

2.21 Close type: dialogclose, which triggers this event when dialog is closed.
2.22 Initialization Example: $ ('. Selector '). Dialog ({
Close:function (event, UI) {...}
});
2.23 use type binding for this event Example: $ ('. Selector '). Bind (' Dialogclose ', function (event, UI) {
...
});

2.3 Open Type: Dialogopen, triggered when dialog is turned on. (Space is limited, the omitted is omitted, the initialization examples and the use of type binding events can be referenced up.) ）
2.4 Focus Type: Dialogfocus, triggered when dialog gets focus.
2.5 DragStart Type: DragStart, triggered when the dialog drag is started.
2.6 Drag Type: Drag, triggered when dialog is dragged.
2.7 DragStop Type: dragstop, triggered when the dialog drag is complete.
2.8 Resizestart Type: Resizestart, triggered when dialog starts to change the size of the form.
2.9 Resize Type: Resize, triggered when dialog is changed in size.
2.10 resizestop Type: resizestop, triggered when the size of the change is complete.

3 methods
3.1 Destroy, I like this Oh, destroy the earth ... Example:. dialog (' Destroy ')
3.2 Disable,dialog Not available, example:. dialog (' Disable ');
3.3 Enable,dialog available, examples, such as 3.2
3.4 Close,open, Close, open dialog
3.5 option, set and get the dialog property, for example:. dialog (' option ', Optionname, [value]), if there is no value, will be obtained.
3.6 IsOpen, if dialog is turned on, returns True, for example:. dialog (' IsOpen ')
3.7 movetotop, move dialog to the top, for example:. dialog (' Movetotop ')

Dialog attributes in jquery