1

私がやろうとしていること： ブラウザーを最大化してJQueryダイアログを開くと、期待どおりに中央で開きます。ただし、ブラウザのサイズをダイアログの幅より少し小さくしてからダイアログを開くと、常に左揃えで開きます。右側にたくさんのスペースがあります。

コード

$(document).ready(function() { 
     var dlg = '';

     dlg=$('#ticketDetails').dialog({
        title: 'TICKET DETAILS',
        resizable: true,
        autoOpen:false,
        modal: true,
        show:'fast',
        hide: 'fade',
        buttons:{ "Close": function() { dlg.dialog("close"); } },
        close: function(e, i) { dlg.hide(); },
        width:1250

     });

私が試したこと：

$(window).resize(function() {
    $('#ticketDetails').dialog({position: ['center', 'center']});
});

私はいくつかの答えを読み、いくつかのバリエーションを試しましたが、何も機能していないようです。

さらに詳しい情報：

http://jsfiddle.net/39GqM/479/

中央のバーを左端までスクロールして実行すると、右側のダイアログコンテンツを表示するには、タイトルバーのそばでバーを左にドラッグする必要があります。そうしないと、スクロールバーが表示されなくなります。現れる。

次の画面は、ブラウザが全画面表示の場合です。ご覧のとおり、コンテンツは完全に適合しています。 ここに画像の説明を入力してください

これでページのサイズが変更され、ダイアログが開きました。ご覧のとおり、左寄せです。スクロールバーはありません。スクロールバーを取得する唯一の方法は、ダイアログを左にドラッグして（タイトルに表示されるカーソルを使用して）、スクロールバーを表示することです。これは、右側（段落/タイトルの先頭）のコンテンツを表示する唯一の方法です。 ここに画像の説明を入力してください

4

5 に答える 5

3

CSS メディア クエリを使用してこれを実現し、IE8 以前をサポートしている場合はフォールバックとしてポリフィルを使用することを強くお勧めします。

jsfiddle での私のソリューションは次のとおりです。

http://jsfiddle.net/39GqM/505/

    .ui-dialog {
      min-width: 80%;  
      width: 80% !important;
   } 
   @media only screen and (min-width: 1200px) {
     .ui-dialog {
        width: 1000px !important;
    } 
   }

   @media only screen and (max-width: 1000px) {
    .ui-dialog {
        min-width: 80%;  
        width: 80% !important;
    }
  }

jQuery-UI が一連のマークアップを DOM に追加し、オーバーライドを強制する !important ルールを設定しているため、 .ui-dialogクラスをターゲットにします。ウィジェットを呼び出すときにダイアログの幅を追加しないでください。CSS に処理させてください。

$("#dialog").dialog();

$(window).resize(function() {
    $("#dialog").dialog("option", "position", "center");
});

古いブラウザーのフォールバックについては、github でこのリポジトリを確認し、メディア クエリのウィンドウ検索を実行します: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

通常、ポリフィルの実装は非常に簡単ですが、それは私の意見では別の問題です。それが役に立てば幸い。

乾杯

于 2013-03-18T19:12:41.590 に答える
2

これは、ダイアログ オプション内の create ステートメントで行いました。ダイアログが画面の中央に表示されます。

create : function() {
             $(window).resize(function() {
                $("#myDialog").parent().position({ 
                                    my : "center",
                                    at : "center",
                                    of : window
                                    });
             });
             $(window).scroll(function() {
                $("#myDialog").parent().position({
                                   my : "center",
                                   at : "center",
                                   of : window
                                   });
             });
},

ダイアログの最後で、位置決め機能を連鎖させた場所。

$("#myDialog").dialog({

 // do stuff
 // also add the positioning with "create"

}).parent().position({
     my : "center center",
     at : "center center+20",
     of : window
 });

フィドル: http://jsfiddle.net/djwave28/yf8fR/4/

于 2013-03-18T02:19:39.840 に答える
0

この問題は、jQueryUIが十分な空き容量（衝突ロジック）を持っていないときに、ダイアログで修正を配置しようとすることが原因で発生します。aのデフォルトは= fitです。collision.dialog()

「フィット」：要素をウィンドウの端から離します。

他の衝突オプションを試してみました：flip、flipfit、noneですが、width="1000px"jQueryUIがダイアログの適切な位置を見つけることができないためです。

ダイアログに動的な幅を与え、イベントをバインドすることによりwindow.resize()、ダイアログは常にドキュメントの幅の80％になり、常に中央に再配置されます。デモを見る

CSS

.width-80 {
  width:80% !important;
}

JavaScript

var $dialog = $('#dialog');
$dialog.dialog({ dialogClass: 'width-80' });

$(window).resize(function() {
    $dialog.dialog('option', 'position', 'center');
});

HTML

<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
于 2013-03-19T09:30:57.697 に答える
0

やってみました ：

$(window).resize(function() {
    $("#ticketDetails").dialog("option", "position", "center");
});
于 2013-02-19T09:59:15.173 に答える
0

解決策を編集して、 jQueryをバージョン 1.8.6 以降

にアップグレードし、jQuery UIをバージョン 1.9.2 にアップグレードします。明らかにバグであり、新しいバージョンで修正されました。 アップグレードされた jQuery を使用した同じ例: http://jsfiddle.net/39GqM/490/



あなたはこれを試してみるべきです

$(window).resize(function() {
    $("#dialog").dialog("option", "position", "center");
});

-> 例 <--

関連する質問 ブラウザのサイズを変更するときにjQuery UIダイアログを自動的に中央に配置する方法は?

于 2013-02-19T09:59:38.877 に答える