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では、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）スタイル属性を正しく設定するには、何をする必要がありますか？

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

次のテストページを使用してIE8.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 に答える