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

Wicket ModalWindow full screen

Wicket ModalWindow full screen と言うと、ちょっと言い過ぎだけど、つまりブラウザで開いたページ表示一杯の
幅、高さで ModalWindow しかも caption なしの ModalWindow に見えない ModalWindow を出したくなった。

昔、captionが無い~フレーム枠が存在しないModalWindow を出したことがある。
ドラッグさせないWicketのModalWindow - Oboe吹きプログラマの黙示録

これをヒントに、更なる展開としてModalWindow に見えないPageの上を別のPageで重ねたように表示する Panel で
CLOSEボタンを配置して元のページに戻ったときに Panel で入力した情報を受け取るのが目的です。
Page遷移させたくないのです。

PageのHTML bodyタグの直下に ModalWindow する div を置きます。

<body>
<div wicket:id="modal"></div>
<a wicket:id="test"  href="#">open</a>

Panel は、必ず CLOSE する為のボタンを置きます。

<wicket:panel>
<form wicket:id="form">
<button wicket:id="close" type="button">CLOSE</button>
</form>
</wicket:panel>

Page の Java

ModalWindow window = new ModalWindow("modal");
queue(window);
queue(AjaxLink.onClick("test", t->{
   window.setContent(new ModalPanel(window.getContentId()));
   window.show(t);
}));

Panel

queue(new Form<Void>("form"));
queue(AjaxButton.onSubmit("close", (b, t)->ModalWindow.closeCurrent(t)));

問題は、CSS です。wicket-modal クラスでとにかく、position 指定でフル表示を指定し、
wicket-mask-dark : 背景表示を強制的に display : none
モーダルのコンテンツの高さを 100% と指定したいところですが、そうでなくて、
最近導入された、CSS3 の Viewports units で画面高さの比率で指定します。height: 100vh とすると
どうしても Wicket が生成する Modal コンテンツ枠が僅かに引っ掛かってブラウザにスクロールバーが
生じてしまいます。

.wicket-modal{
   top: 0 !important;
   left: 0px !important;
   width: 100% !important;
   height: 100% !important;
   position: absolute !important;
   visibility: visible !important;
}
.w_caption, div.w_top_1, div.w_topLeft, div.w_topRight, div.w_bottom_1{
   display: none;
}
.wicket-mask-dark{
   display: none !important;
}
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, div.w_window_3 {
   margin: 0;
   background-image: none;
   _background-image: none;
   border: none:
   display: none;
   height: 99vh; !important;
}

だから、99vh にします。それでもわずかに線が出るのですが、ここまでできれば良しとします。