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

Wicketモーダルウィンドウの外観を変更する

Wicket のモーダルウィンドウはカプセル化されているので使いやすい反面、
ベース部分のデザイン、通常はフレームの細部のデザインまでデフォルトから
変えようとはしないが、別のWebアプリで作られたサイトを Wicket で塗り替えようと
した場合、このモーダルウィンドウは Wicket に置き換えられたことがバレやすい。

f:id:posturan:20160313185638j:plain


このモーダルウィンドウのタイトル部分、マウスでモーダルウィンドウを移動するのに
使用する CAPTION と呼ばれるものだが、これを無くすだけでも少しは見た目が変わる。

そんな事したらモーダルウィンドウとして使いにくくなるので賛成できないが、
そういうデザインの要求の時は、CSSスタイルを変更する。
org.apache.wicket.extensions.ajax.markup.html.modal.ModalWindow

のソースを見れば解るのだが、
 w_caption クラスを以下のように指定するスタイルを再定義すれば良い。

.w_caption{
    display: none;
}

こうすることで、以下のように表示されるようになる。

f:id:posturan:20160313185604j:plain


上と下のグレー色のバーを消したいならば、
.w_top_1{
    display: none;
}
.w_bottom_1{
    display: none;
}

ということになるが、これをすると左右のシャドウの境界線バーだけが残って不自然になる。
同じ方法で左右のバーも消すというのは、Wicket のモーダルウィンドウの構造上、
無理がある。→ Wicket の元のソース modal.js を見れば解る。

背景色、だけでも変えたいなら、wicket_modal クラスのスタイルを再定義すればよい。

.wicket_modal{
    background-color: #c0c0c0;
}


スタイルの再定義は、Page クラスで、
   org.nadia.page.BasePage#renderHead(org.apache.wicket.markup.head.IHeaderResponse)

をオーバーライドして、

response.render(CssHeaderItem.forReference(new CssResourceReference(SamplePage.class, "noframemodal.css")));

のように、再定義するCSSファイルを指定する。