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

ドラッグさせないWicketのModalWindow

Wicket のモーダルウィンドウをドラッグできないようにすることはできないだろうか?
と悩んでいた。http://blog.zaq.ne.jp/oboe2uran/article/1116/で書いたように、
jQuery UI の datepicker や autocomplete をモーダルウィンドウの中に配置すると
ドラッグ時に崩れてしまうケースがある。
WicketAPIドキュメントにも ModalWindow は、draggable と明確に書いている。
Wicket の ModalWindow が、jQuery UI で、draggable なダイアログを描画しているわけでもないので、

removeClass(' ui-draggable-disabled ui-state-disabled') というのでは、ダメである。

それならば。。。


ModalWindow の縁=フレームやCAPTION 部分を排除してしまえ!!
ということで。。
通常の ModalWindow

f:id:posturan:20160313174628j:plain



これを以下のようにする

f:id:posturan:20160313174637j:plain



以下のCSSスタイルシートを適用させることでこのようにすることができる。


.w_caption, div.w_top_1, div.w_topLeft, div.w_topRight, div.w_bottom_1 {
   display: none;
}

div.w_left, div.w_right
, div.wicket-modal div.w_content_1
, div.wicket-modal div.w_right_1
, div.wicket-modal div.w_left_1
, div.w_content_1, div.w_content_2, div.w_content_3 {
   margin: 0;
   background-image: none;
   _background-image: none;
   border: none:
   display: none;
}


ModalWindow デフォルトのCLOSE 「×」ボタンを無くすことになるのでCLOSEボタンを必ず、Wicket の Panelを用意した時に
自前で配置するようにする。

これだけのCSSだと、ModalWindow の影は無くなるので、、、
以下のスタイルシート属性を追加すると良いかもしれない。

div.w_content_1{
    box-shadow: #808080 2px 0px 12px 6px;
}