Notes on the dialog attribute in Jquery_jquery

Copy code The code is as follows:

$('#dialogDiv').dialog(
{
hide:true, //Click to close to hide. If you don’t add this, an error will occur if you click again after closing the pop-up window.
autoOpen:false,
height:380,
width:800,
modal:true, //Mask layer (pop-up will affect the page size)
title:'Bid Opener',
overlay: {opacity: 0.5, background: "black" ,overflow:'auto'} ,
buttons:{
'OK':function(){
// Processing method addUser();
},
'Cancel':function(){
// Close the current Dialog
$(this).dialog("close");
}
}
}
);
$('#addItems').click(function( ){
loadPage('buildOpeningGroupAddOpering.htm','#dialogDiv'); //dialog memory page
//$(window.parent.document).find("#projectSpaceContent .show").height( 600)//Adjust the current Iframe height
$('#dialogDiv').data('title.dialog', 'Add bidder').dialog('open'); //Modify the title
return false;
})

function loadPage(path,id) {
$.get(path, function(data) {
// data = data.replace(//ig,""); //Remove script tag
data = data.replace(//ig,""); //Remove link tag
data = data.replace(//ig,""); //Remove html tag
data = data.replace(/< /?body.*>/ig,""); //Remove body tag
data = data.replace(//ig,""); //Remove head tag
data = data.replace(//ig,""); //Remove doctype tag
data = data.replace(/.*/ig,""); //Remove title tag
$(id).empty().html(data);//Clear contentMain content and load html
});
}
//Add a close button to the popup layer
$('.ui-dialog-buttonpane').show().empty();
$('').click(function(){
$("#dialogDiv").dialog('close');
return false;
}).appendTo('. ui-dialog-buttonpane');

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

Copy code The code is as follows:

<script> <br>$("#dialog").dialog({autoOpen:false,buttons:{"OK":function(){$(this).dialog("close") ;}},closeOnEscape:true,hide:"slide",modal:true,title:"dialog"}).dialog("open"); <br></script>

< div id="dialog" title="Dialog Title">You are a pig!

1 Attribute
1.11 autoOpen, when this attribute is true, the dialog window will be automatically opened when the dialog is called. When the attribute is false, the window will be hidden at first, and the dialog window will not pop up until .dialog("open") is reached. Default: true.
1.12 Initialization example: Please note that $('.selector') is the class name of dialog. In this example, .selector=#dialoag will not be explained again.
$('.selector').dialog({ autoOpen: false });
1.13 After initialization, get and set this property example:
//Get
var autoOpen = $('. selector').dialog('option', 'autoOpen');
//Setup
$('.selector').dialog('option', 'autoOpen', false);

1.21 bgiframe defaults to false. When true, the bgiframe plugin will be used, to fix the issue in IE6 where select boxes show on top of other elements, regardless of zIndex. Requires including the bgiframe plugin. Future versions may not require a separate plugin.
Under IE6, let the gray screen at the back cover the selection.
1.22 Initialization example:
$('.selector').dialog({ bgiframe: true });
1.23 After initialization, get and set:
//Get
var bgiframe = $('.selector').dialog('option', 'bgiframe');
//Settings
$('.selector').dialog('option', 'bgiframe', true);

1.31 buttons Display a button, write the text of the button, and set the button click function. Default is {}, no button.
The buttons attribute is already used in the above example, please pay attention.
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
$('.selector').dialog('option', 'buttons', { "Ok": function() { $(this).dialog("close"); } });

1.41 When closeOnEscape is true, click the ESC key on the keyboard to close the 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
$('.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
$('.selector').dialog('option', 'dialogClass', 'alert');

1.61 draggable, resizable: whether draggable You can use the title header to drag, the default is true, and you can drag; whether resizable can change the size of the dialog, the default is 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');
//Setup
$('.selector').dialog('option', 'draggable', false);

1.71 width, height, the width and height of the dialog, the default is auto, automatic.
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, the maximum width, maximum height, minimum width, and minimum height that the dialog can change. The default value of maxWidth and maxHeight is false, which is unlimited. The default value of minWidth and minHeight is 150. Using these properties requires ui.resizable.js support.
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, the effect when the dialog is closed and opened. The default is null and has no effect
1.92 Initialization example: used in the above example, please see it yourself.
1.93 After initialization, get and set: please refer to 1.63

1.101 modal, whether to use modal window. After the modal window is opened, other elements of the page will not be clickable until the modal window is closed. Defaults to false to not modal the window.
1.102 Initialization example: $('.selector').dialog({ modal: true });
1.103 After initialization, get and set: please refer to 1.63

1.111 title, the title of the dialog Text, empty by default.
1.112 Initialization example: see the top example. 1.113 After initialization, get and set: please refer to 1.63

1.121 position, the display position of the dialog: can be 'center', 'left', 'right', 'top', 'bottom', or The offsets of top and left can also be a string array 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, the zindex value of dialog, 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 The default value of stack is true. When the dialog gets focus, the 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 event
2.11 beforeclose type dialogbeforeclose , this event will be triggered when the dialog tries to close. If false is returned, the closing will be blocked.
2.12 Initialization example: $('.selector').dialog({
beforeclose: function(event, ui) { ... }
});
2.13 Use type to bind this event Example: $('.selector').bind('dialogbeforeclose', function(event, ui) {
...
});

2.21 close type: dialogclose, when the dialog is This event is triggered after closing.
2.22 Initialization example: $('.selector').dialog({
close: function(event, ui) { ... }
});
2.23 Use type to bind this event Example: $('.selector').bind('dialogclose', function(event, ui) {
...
});

2.3 open type: dialogopen, when the dialog is opened triggered when. (The space is limited, so I will omit what should be omitted. You can refer to the initialization example and use of type binding events.)
2.4 focus type: dialogfocus, triggered when the dialog gains focus.
2.5 dragStart Type: dragStart, triggered when dialog dragging starts.
2.6 drag type: drag, triggered when the dialog is dragged.
2.7 dragStop Type: dragStop, triggered when the dialog drag is completed.
2.8 resizeStart Type: resizeStart, triggered when the dialog starts to change the size of the form.
2.9 resize type: resize, triggered when the dialog is resized.
2.10 resizeStop Type: resizeStop, triggered when the size is changed.

3 methods
3.1 destroy, I like this, destroy the earth. . . Example: .dialog( 'destroy' )
3.2 disable, dialog is not available, example: .dialog('disable');
3.3 enable, dialog is available, for example, 3.2
3.4 close, open, Close and open the dialog
3.5 option, set and get the dialog properties, for example: .dialog('option', optionName, [value]), if there is no value, it will be obtained.
3.6 isOpen, returns true if the dialog is open, for example: .dialog('isOpen')
3.7 moveToTop, moves the dialog to the top, for example: .dialog( 'moveToTop' )