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 にします。それでもわずかに線が出るのですが、ここまでできれば良しとします。