昔、Wicket の ModalWindow の caption を非表示にする css を書いたり、
Wicketモーダルウィンドウの外観を変更する - Oboe吹きプログラマの黙示録
CSS の記述で、画面いっぱいの ModalWindow 表示を書いたことがありました。
Wicket ModalWindow full screen - Oboe吹きプログラマの黙示録
でも、これだと通常のNormal な表示のModalWindow と併用して、ある時は Normalで表示、別のある時は、
画面いっぱいの ModalWindow ということができません。
そこで、もっと簡単な JavaScript で1つの Page の中で併用できるようにします。
更に、ブラウザウィンドウのサイズを変更した時に追従するようにします。.on("resize"., fuction を設定します。
.on() の前に、.off() するのを忘れると、caption 有りと無し両方のフルサイズ2通りを1つのページで
実行すると、片方ができなくなります。
var _adjust_full_nocaption = function(){ $(".wicket-modal").attr("style", "top:0;left:0;width:100%;position:fixed;visibility:visible;"), $(".w_content_container").attr("style", "overflow:auto;height:" + window.innerHeight + "px;"); $("div.w_caption").attr("style", "display:none;"), $("div.w_top_1").attr("style", "display:none;"), $("div.w_bottom_1").attr("style", "display:none;"), $("div.w_right_1").attr("style", "margin:0;"), $("div.w_content_1").attr("style", "margin:0;"); } var _adjust_ful_captionON = function(){ $(".wicket-modal").attr("style", "top:0;left:0;width:100%;position:fixed;visibility:visible;"), $(".w_content_container").attr("style", "overflow:auto;height:"+ (window.innerHeight - 10) + "px;"); } /* caption 無し;ハンドル無し、フル表示 */ var adjustFull = function(msec){ setTimeout("_adjust_full_nocaption()", msec); $(window).off('resize'); $(window).on('resize', function(){ _adjust_full_nocaption(); }); }; /* caption ハンドル有り、フル表示 */ var adjustFullHandle = function(msec){ setTimeout("_adjust_ful_captionON()", msec); $(window).off('resize'); $(window).on('resize', function(){ _adjust_ful_captionON(); }); };
このJavaScript を、ModalWindow 表示時に、AjaxRequestTarget の appendJavaScript で実行するのです。
final ModalWindow window = new ModalWindow("modalwindow").setResizable(false); // AjaxRequestTarget target; // window.show(target); target.appendJavaScript("adjustFull(100)");
少し不安なのは、height の計算です。
$(".w_content_container").attr("style", "overflow:auto;height:" + (window.innerHeight - $(".w_caption").height() - $(".w_bottom_1").height() - $(".w_top_1").height() - 6) + "px;");
としなければならないか、実践は調整しなくてはならないかもしれません。
style のセットを jQuery の prop でなくて、attr にしているのは、IE11対策です。