I use jQuery UI modal dialog for my recent project, and the client is very detail about browser compatibility, especially about IE6. I believe if you’ve played around with IE6, you would notice some irritating behavior, and in this case with modal dialog is that sometimes the combo box still appears on top of the modal dialog. If I’m not mistaken you could search on google about “IE6 active-x bleed through” for details of why this thing happen on IE6.
I’ve a workaround for this IE6 active-x bleed through with jQuery UI modal dialog, I got the idea from other modal dialog that has fix this issue, they are using dummy iframe to cover the page, so other active-x (in this case, combo box) will be hidden behind this iframe, while the modal dialog sits on top of the dummy iframe.
basically i just add this iframe on the part of jQUery UI modal dialog where it adds a layer div for background, plus additional checking for IE6 browser.
<iframe class=\”ui-widget-overlay\” src=\”javascript:false;document.write(”);\” style=\”opacity: 0; width: 100%; height: 100%;z-index:-1;\”/><p style=\”width: 100%; height: 100%;\”/>
var d=c(“<div></div>”).appendTo(document.body).addClass(“ui-widget-overlay”).css({width:this.width(), height:this.height()});
so it will be:
if(c.browser.msie&&c.browser.version<7){var d=c(“<div><iframe class=\”ui-widget-overlay\” src=\”javascript:false;document.write(”);\” style=\”opacity: 0; width: 100%; height: 100%;z-index:-1;\”/><p style=\”width: 100%; height: 100%;\”/></div>”).appendTo(document.body).addClass(“ui-widget-overlay”).css({width:this.width(),height:this.height()});}else{var d=c(“<div></div>”).appendTo(document.body).addClass(“ui-widget-overlay”).css({width:this.width(),height:this.height()});}
you can download the modified jquery ui modal dialog code here.
(note that this is only jquery ui modal dialog, it will need ui.core.js, ui.draggable.js, and ui.resizable.js. You can download the complete jquery ui framework from http://jqueryui.com/)