読者です 読者をやめる 読者になる 読者になる

ModalWindowの中Datepicker/Autocompleteの問題

Wicket ModalWindow の中に jQueryUI Datepicker 等を配置すると、
ドラッグした時に残されるのでドラッグさせない方法を先日、
  http://blog.zaq.ne.jp/oboe2uran/article/1124/
で書きましたが、やはりモーダルウィンドウとしての価値がなくなり良くありません。
ドラッグイベントを捕捉して対処したかったのですが、モーダルウィンドウの CAPTION にマウスが触れた時、またはクリックした時に
開いているカレンダーは閉じる。Autocomplete のプルダウンは閉じるとした方が良いようです。

ModalWindow を起動するとき、AJAXのビヘビアで起動することになると思いますが、その時に以下のように用意した JavaScript メソッドを世呼び出します。

var setModalDatepicker = function(){
   $.datepicker.setDefaults($.datepicker.regional["ja"]);
   /* class="datepicker" に対して datepicker を適用する */
   $("input[class='datepicker']").datepicker({
      prevText:"前月", nextText:"翌月",
      changeMonth: true,
      changeYear: true, yearRange: '-3:+4',
   });
};

var captionSetting = function(){
   $("div[class='w_caption']").mouseover(function(){
       /* Autocomplete のプルダウンを閉じる */
       $("input[class='ui-autocomplete-input']").autocomplete("close");
       /* Datepicker のカレンダーは、全て隠す */
       $("input[class$='hasDatepicker']").datepicker("hide");
   });
};

======================
class="w_caption" の div に対してこのようにすれば良いのです。

モーダルウィンドウの起動は、、
final ModalWindow window = new ModalWindow("modal");

add(new Button("openmodal").add(new AjaxEventBehavior("onclick") {
   @Override
   protected void onEvent(AjaxRequestTarget target){
      window.setContent(new ModalPanek(window.getContentId()));
      window.setResizable(false);
      window.show(target);
      target.appendJavaScript("setTimeout('setModalDatepicker();captionSetting();', 200);");
   }
}));
=======================
show() の後で、JavaScript メソッド setTimeout で呼びます。
更に、注意すべきことがあります。

ModalWindow の中に、AutoCompleteTextField を配置した時、
肝心のプルダウンが ModalWindow の背後に回ってしまいます。

Wicketのユーザフォーラムで、Wicketのコミッタである Igor氏は、CSS スタイルシートで、ui-autocomplete の z-index を上げればいいとだけ言ってますが、
どのくらいの数値にすれば良いのかまでは、言ってません。
使用状況によってい不確定な値なのだとすると相対値?
試行錯誤の結果、すごく大きい値を指定しないとダメだった。
 z-index: 10000; ではNG

CSSを、
.ui-autocomplete{
  z-index: 100000;
}


と書いてやっと思い通りに表示される。