9

我正在使用 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 中，height样式属性设置为零，生成的 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）样式属性？

4

4 回答 4

6

解决方案是在创建对话框后调用 .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/

为我工作

于 2011-10-20T18:01:28.190 回答
5

我无法使用以下测试页面使用 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>
于 2010-04-22T01:14:58.883 回答
1

我发现解决此问题的方法是将其添加到配置中：“autoOpen：false”

然后在文件加载时，

if ($('#DIV_BookingDetails')) {
   $('#DIV_BookingDetails').dialog('open');
   $('#DIV_BookingDetails').height(150);
}

（例如配置高度为200）

于 2011-07-19T10:58:00.457 回答
0

在 jquery 论坛上找到了这个建议，它解决了我的问题（虽然承认不满意，因为它没有解决潜在的错误）。

http://forum.jquery.com/topic/setting-dialog-height-in-ie8-does-not-work

强制设置 .ui-dialog .ui-dialog-content班级的高度，包括!important：

.ui-dialog .ui-dialog-content {
border: 0; padding: .5em 1em;
background: none; overflow: auto;
zoom: 1; height: 300px !important;}

警告：所有对话框的固定高度；调整大小不再正常工作。

于 2010-04-22T16:01:01.680 回答