前回に続きWidget.Dialogです。

Widget.Dialogでは、メッセージが長くなった場合に、heightを固定で渡さないと、
ボタンやメッセージがダイアログ部分からはみ出てしまいます。
heightを渡さなくても、自動でダイアログサイズの調整をしてくれれば良いのに、と思い、改造しました。

また、ダイアログ部分がたまにページコンテンツの下側に入り込んでしまう問題も修正しました。
GPLなので合わせて公開しておきます。

まず長いメッセージの件ですが、ダイアログ表示処理の最後で下記のような関数を呼ぶようにしました。
なお、dojo toolkitを読み込んでいないと動作しません。
それと、本来は上下中央位置の調整も行うべきですが、割愛しています。

_adjustWidgetDialogHeight: function () {
	if (typeof dojo == 'undefined') return;
	
	var height = 0;
	dojo.forEach(['dmsg', 'dbuttons'], function(id){
		// add the margin box height
		height += dojo.coords(id).h;
	});
	
	dojo.style('dwindow', 'height', height + 'px');
	return dojo.style('dwindow', 'height');
}

もう一点、オーバーレイ領域やダイアログ領域が下に入り込んでしまう場合がある件ですが、
ページ内のコンテンツに、z-indexが設定されているものがある場合になるようです。
JavaScriptでz-indexを設定するようにしました。

doverlay.style.zIndex = 9999;

dwindow.style.zIndex = 10000;

二点の修正を行ったファイルをこちらに置いておきます。ご活用ください。

Dialog.jsをダウンロード

ちなみに、#dwindowにborder-radiusなど設定してみると、ブラウザーによっては角丸になってちょっとかわいらしくなります。
この修正ならcssだけでもできますので興味がありましたら試してみると良いかと思います。

トラックバック&リンク
前回のエントリー