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

[bryn]

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,[[BR]] 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,[[BR]] draggable:false,[[BR]] 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>

[tj.vantoll]

Hi bryn,

Thanks for taking the time to contribute to the jQuery UI project. We're going to need a reduced test case in order to assess this ticket. You can use ​http://jsfiddle.net/tj_vantoll/QFp2J/ to get started.

Also the zindex option for removed in 1.10 and is noted in the upgrade guide: ​http://jqueryui.com/upgrade-guide/1.10/#removed-zindex-option.

Thanks.

[bryn]

This issue should be closed.

Both 9143 and 9142 were caused by the same issue, which was a missing Doctype declaration on the page.

This issue affected IE9 and IE10 but not Firefox, Safari or Chrome.