Response title
This is preview!
Hi
I'm using a jQuery UI dialog, with modal: true. Works fine in Firefox 3.6.3, Chrome 4.1.249.1064 (45376). jQuery core version is 1.4.2, and UI components are the latest and the ones designed to work with core 1.4 and up.
However, in IE8, with a page greater than 4096 pixels in height, the modal overlay starts misbehaving. This was found by crafting a simple page (using the guts of the downloaded demo) with a couple of height-styled divs.
- <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.1.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
<script type="text/javascript">
$(function(){ - // Dialog
$('#dialog').dialog({
autoOpen: false,
width: 600,
modal: true
}); - // Dialog Link
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
return false;
}); - });
</script>
</head>
<body style="margin:0px;"> - <div id="dialog" title="Dialog Title"></div>
<!-- 94px high -->
<div style="height:92px; border:1px solid black;">
<p><a href="#" id="dialog_link">Open Dialog</a></p>
</div>
<!-- manually add div to lengthen the page to help figure out why the modal dialog isn't working correctly in IE. -->
<!-- if we add 1 to the height, making the total page height 4097 pixels, then the modal overlay goes awry -->- <!-- 4002px high -->
<div style="height:4000px; border:1px solid black;"></div>
</body>
</html>
Same problem exists with jQuery 1.3.2 and related UI components. Any ideas?
[edit] Noted that telling IE to run in Quirks mode "resolves" this problem...[/edit]
3
