Modal and Position not working ... (IE9/Win7)

Environment: IE 9, Win 7

With general structure of code as below I find the following issues.

• The subform displays OK, but its position cannot be set using any of the legacy methods or the 'position' object. The dialog always displays in top left of the browser window.
• Although 'modal' option is set, in fact the form does not display modally, e.g. form input elements that are not included in the dialog remain editable when the dialog is open.

When I use a different browser, such as Firefox, Chrome, Safari (all latest versions) I find that the modal function works, however the dialog itself does not display.

Given that no other people have reported this issue, I accept the possibility this may be my code at fault, however I contend that at very least, the API Documentation for Jquery UI Dialog needs some attention.

For example, the zIndex property is important to correct operation of the dialog, and yet it is not mentioned in the API documentation at all.

Thanks,

• Bryn Parrott

Central Coast Area, NSW Australia.

var j = $.noConflict();

var maxzindex=1999;

j(document).ready(function() {

AddSubform = function(fldsetname,arrayname,formnum) {

var newfldsetname = '#' + fldsetname + '_' + String(formnum);

var newfldsetname1 = fldsetname + '_' + String(formnum);

var subformOBJ = document.getElementById(newfldsetname1);

maxzindex++;

subformOBJ.style.zIndex = maxzindex.toString();

j(newfldsetname).dialog( "option", "modal", true );

j(newfldsetname).dialog('open');

j(newfldsetname).dialog("option", "position", { my: "left top", at: "center center", of: window } );

};

j("#fldset_Quantity_1").dialog({

appendTo: "#dialog_Quantity_1",

modal: true,

autoOpen:false,

buttons: [ { text: "OK", click: function() {subFormClickOK("fldnamelist_Quantity_1","fldset_Quantity_1","Quantity","1");} },

{ text: "Close", click: function(){subFormClickCancel("fldnamelist_Quantity_1","fldset_Quantity_1","Quantity","1");} }

],

title: 'Quantity 1',

resizable:false,

draggable:false,

height:"210",

width:"790"

});

});

General Page structure

<form>

<some input tags>

<div id="dialog_Quantity_1">

<div class="fldset" name="fldset_Quantity_1" id="fldset_Quantity_1" style="background-color:white;height:133px;width:720px;">

<some input tags>

</div>

</div>

<div id="dialog_Quantity_2">

<div class="fldset" name="fldset_Quantity_2" id="fldset_Quantity_2" style="background-color:white;height:133px;width:720px;">

<some input tags>

</div>

</div>

<some further input tags>

</form>