Response title
This is preview!
JQuery UI Dialog Positioning not working in IE 8
in Using jQuery UI
•
6 years ago
My dialog positions correctly in FF and Chrome, but does not position at all in IE 8 using JQuery 1.8.2 and 1.8.3.
1. Using JQuery 1.7.2 positioning works correctly in all browsers tested.
2. Using JQuery 1.8.2 and 1.8.3 it works in FF and Chrome, but not IE 8. The position is always Top=0, Left =0. There are other issues as well. Moving the dialog causes the parent window to jitter. There are also sizing issues which may or may not be related.
Here is test code to demonstrate the issue:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" type="text/css" href="/css/smoothness/jquery-ui-1.9.1.custom.css" media="screen">
<!--<script type="text/javascript" src="/js/jquery-1.8.2.min.js"></script>-->
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.9.1.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#ClickMe1').click(function(){
alert("I'm Clicked 1");
OpenDialog1();
});
$('#ClickMe2').click(function(){
alert("I'm Clicked 2");
OpenDialog2();
});
});
function OpenDialog1(){
var diag = $('<div id="ModalDialog"><\/div>');
diag.append('<h2>Test Dialog</h2>');
diag.dialog({
modal:true,
autoOpen: false,
minHeight:675,
height: 675,
width: 600,
position: ['center',20],
title: "<h2>Fouling Trajectory<\/h2>",
close: function(ev, ui){$(this).remove();}
});
diag.dialog('open');
}
function OpenDialog2(){
$("#ModalDialog2").dialog({
modal: true,
position: { my: "center", at: "center", of: window }
});
}
</script>
</head>
<body>
<div><button id="ClickMe1" type="button">Click Me 1!</button></div>
<div><button id="ClickMe2" type="button">Click Me 2!</button></div>
<div id="ModalDialog2" style="display:none;">This is Invisible initially</div>
</body>
</html>
1. Using JQuery 1.7.2 positioning works correctly in all browsers tested.
2. Using JQuery 1.8.2 and 1.8.3 it works in FF and Chrome, but not IE 8. The position is always Top=0, Left =0. There are other issues as well. Moving the dialog causes the parent window to jitter. There are also sizing issues which may or may not be related.
Here is test code to demonstrate the issue:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" type="text/css" href="/css/smoothness/jquery-ui-1.9.1.custom.css" media="screen">
<!--<script type="text/javascript" src="/js/jquery-1.8.2.min.js"></script>-->
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.9.1.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#ClickMe1').click(function(){
alert("I'm Clicked 1");
OpenDialog1();
});
$('#ClickMe2').click(function(){
alert("I'm Clicked 2");
OpenDialog2();
});
});
function OpenDialog1(){
var diag = $('<div id="ModalDialog"><\/div>');
diag.append('<h2>Test Dialog</h2>');
diag.dialog({
modal:true,
autoOpen: false,
minHeight:675,
height: 675,
width: 600,
position: ['center',20],
title: "<h2>Fouling Trajectory<\/h2>",
close: function(ev, ui){$(this).remove();}
});
diag.dialog('open');
}
function OpenDialog2(){
$("#ModalDialog2").dialog({
modal: true,
position: { my: "center", at: "center", of: window }
});
}
</script>
</head>
<body>
<div><button id="ClickMe1" type="button">Click Me 1!</button></div>
<div><button id="ClickMe2" type="button">Click Me 2!</button></div>
<div id="ModalDialog2" style="display:none;">This is Invisible initially</div>
</body>
</html>
1
