同じように機能させたいダイアログがいくつかあります。空のダイアログを作成し、クリックされたボタンに応じて ajax を介してさまざまなコンテンツをダイアログにロードし、ダイアログを開きます。開いたらウィンドウの高さを確認し、ダイアログの高さがウィンドウの高さよりも大きい場合は、高さをウィンドウ サイズから 20px を引いた値に設定します。それ以外の場合、ダイアログの高さは自動です。ウィンドウのサイズ変更イベントでこれと同じ関数を実行し、ウィンドウの中央に配置します。また、ダイアログの最後にデータを追加する特定のボタンがダイアログ内でクリックされたときに関数を実行します。ドラッグ ハンドルを使用したダイアログの手動サイズ変更を中断することを除いて、すべてがうまく機能します。jQuery 1.9.1 と jQuery UI 1.9.2 を使用しています。コードは基本的に次のようになります。
//Create the dialog
$("div.myDialogContainer").dialog({
title:"Whatever",
autoOpen:false,
modal:true,
resizable:true,
width:850,
open:function(event, ui){$.positionDialog();}
});
//Load content and open the dialog
$("#openButton").on("click", function(){
$.ajax({url:"myPath", success:function(data){
$("div.myDialogContainer").html(data).dialog("open");
$("div.myDialogContainer #addMoreData").on("click", function(){
$("div.myDialogontainer div.loadedContent").append("<div>More Data</div>");
});
}
});
});
//Position the dialog on window resize
$(window).resize(function(){$.positionDialog();});
//check dialog height and center on screen
(function(){$.positionDialog=function(){
var myDialog = $("div.myDialogContainer:visible");
var availableHeight = $(window).height() - 20;
var dialogHeight = myDialog.parent().height();
if(dialogHeight>=availableHeight){
myDialog.dialog("option", "height", availableHeight );
}
else{
myDialog.dialog("option", "height", "auto" );}
myDialog.dialog("option", "position", "center");
}
})(jQuery);
ここに何か不足していますか、それとも jQuery/jQuery UI の単なるバグ/制限ですか??