jQueryダイアログでの幅と高さの自動サイズ変更

Question

jQuery UIダイアログを使用してajaxコンテンツをロードしています。ダイアログの垂直方向の位置は正しく設定されていますが、width: "auto"オプションを指定すると、水平方向に中央に配置されません。中心から右に100pxのように偏心しています。ここで

は私のコードです：

$('.open').live('click', function(e) { 
    e.preventDefault(); 
    $("#modal").load($(this).attr('href')).dialog({ 
     title: $(this).attr('title'), 
     modal: true, 
     autoOpen: true, 
     draggable: false, 
     resizable: false, 
     width: 'auto', 
     position: ['center', 'top'] 
    }); 
}); 

すべてのアイデアは、それが自動サイズを変更し、中央に残る持つ方法はありますか？

EDIT：これは動作します：

$("#modal").load($(this).attr('href'), function() { 
    $("#modal").dialog({ 
     title: $(this).attr('title'), 
     width: 'auto', 
     modal: true, 
     autoOpen: true, 
     draggable: false, 
     resizable: false, 
     position: ['center', 150], 
     create: function(event, ui) {} 
    }); 
}); 

Answer 1

は、このコードを試してみてください。それは私のために動作し、クロスブラウザです。

$(window).resize(function(){ 
     $('.className').css({position:'absolute', left:($(window).width() 
     - $('.className').outerWidth())/2, 
     top: ($(window).height() 
     - $('.className').outerHeight())/2 
     }); 
}); 

// To initially run the function: 
$(window).resize(); 

これでダイアログを作成するのはかなり簡単です。

Answer 2

位置決めの問題を回避するには、ダイアログを作成または開く前にコンテンツが読み込まれるのを待つ必要があります。そうでない場合：

1. jQueryのUIダイアログを引き起こし、空 DIVコンテンツ負荷が、ダイアログの右側が左側に固定したままコンテンツを収容するように伸び
2. の幅及び中心を計算します右

あなたのサンプルコードは、このように変更する必要があり向かってシフト登場するダイアログ：

$("#modal").load("/ajax/content.html", function() { 
    // callback is executed after post-processing and HTML insertion has been performed 
    // this refers to the element on which load method was called 
    $(this).dialog({ 
    modal: true, 
    autoOpen: true, 
    draggable: false, 
    resizable: false, 
    width: "auto", 
    position: { my: "top", at: "top", of: window } 
    }); 
});