bra*_*ahn 9 jquery internet-explorer jquery-ui jquery-ui-dialog
我正在使用jquery UI的对话框小部件在我的Web应用程序中呈现模式对话框.我这样做是通过将所需DOM元素的ID传递给以下函数:
var setupDialog = function (eltId) {
$("#" + eltId).dialog({
autoOpen: false,
width: 610,
minWidth: 610,
height: 450,
minHeight: 200,
modal: true,
resizable: false,
draggable: false,
});
};
在Firefox,Safari和Chrome中,一切正常.但是,在IE 8中打开对话框时,只有div.ui-dialog-titlebar可见 - div.ui-dialog-contents不是.
问题似乎是在现代浏览器中,div.ui-dialog-contents在其样式中设置了特定的高度,即在打开对话框后,生成的HTML是:
<div class="ui-dialog-content ui-widget-content" id="invite-friends-dialog"
style="width: auto; min-height: 198px; height: 448px">...</div>
在IE8中,heightstyle属性设置为零,结果HTML为:
<div class="ui-dialog-content ui-widget-content" id="invite-friends-dialog"
style="min-height: 0px; width: auto; height: 0px">...</div>
要正确设置height(和min-height)样式属性,我需要做什么？
解决方案是在创建对话框后调用.height('auto').
$(document).ready(function() {
$('#phoneDataButton').click(function() {
$('#phoneDataSearchForm').dialog({
modal:true,
width: 700,
close: function() {
$('#phoneSearchResults').html("");
location.reload(true);
}
}).height('auto')
})
})
图片来源:http://norrisshelton.wordpress.com/2011/10/07/ie8-issues-with-jquery-dialog-causes-box-to-have-wrong-height-and-scrollbars/
为我工作
我无法使用IE 8.0.7600.16385IC使用以下测试页重现您的问题.我很想知道你是如何展示对话框的.你在说正确的方法$(selector).dialog('open');吗？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<link rel="Stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
var setupDialog = function(eltId) {
$('<h1>hello world!</h1>').dialog({
autoOpen: true,
width: 610,
minWidth: 610,
height: 450,
minHeight: 200,
modal: true,
resizable: false,
draggable: false
});
};
setupDialog();
});
</script>
</head>
<body>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
14715 次 |
| 最近记录： |