Can the Wicket modal window be customized?

2楼-- · 2019-05-03 07:32

According /org/apache/wicket/extension/ajax/markup/html/modal/res/modal.js you can't modify modal window decorator by wicket api because modal window markup defined entirely in javascript. So as always you can select simple but bad way and replace modal.js by your own, or you can hardly true way changing modal window after show using js to modify span with class "w_captionText". Or may be (i'm not test it) you may define you customized code in Caption property and tell to wicket to not escape special html char's in this Caption. May be it helps.

0人赞添加讨论(0) 举报

疯言疯语

3楼-- · 2019-05-03 07:36

You can achieve such kind of effect with help of CSS. Create your custom modal window (in case you wont to create your custom style) and specify css resource.

package org.ru5.test;

import org.apache.wicket.ResourceReference;
import org.apache.wicket.extensions.ajax.markup.html.modal.ModalWindow;
import org.apache.wicket.markup.html.CSSPackageResource;
import org.apache.wicket.markup.html.resources.CompressedResourceReference;
import org.apache.wicket.model.IModel;

public class CustomModalWindow extends ModalWindow {
    private static final long serialVersionUID = 1L;

    private static ResourceReference CSS = new CompressedResourceReference(
            CustomModalWindow.class, "res/custom-modal.css");

    /**
     * Creates a new modal window component.
     * 
     * @param id
     *            Id of component
     */
    public CustomModalWindow(final String id) {
        super(id);
        init();
    }

    /**
     * Creates a new modal window component.
     * 
     * @param id
     *            Id of component
     * @param model
     *            Model
     */
    public CustomModalWindow(final String id, final IModel<?> model) {
        super(id, model);
        init();
    }

    private void init() {
        add(CSSPackageResource.getHeaderContribution(CSS));
    }

}

/org/ru5/test/CustomModalWindow.html

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org">
<body><wicket:panel><div wicket:id="content"></div></wicket:panel></body>
</html>

Everything you need:

/org/ru5/test/res/custom-modal.css

.headBtn{position: absolute; z-index: 20001; top: 2px; left: 200px;}

/org/ru5/test/TestPanelForTestWindow.html

....
<div class="headBtn">
<input type="button" value="ok">
</div>
....

You can try to override modal.js function or just make a trick with help of JS DOM. Hope this would help.

0人赞添加讨论(0) 举报

等我变得足够好

4楼-- · 2019-05-03 07:38

Bit of a hack, but works:

import org.apache.wicket.extensions.ajax.markup.html.modal.ModalWindow;
import org.apache.wicket.model.IModel;

public class FixedModalWindow extends ModalWindow {
  private static final long serialVersionUID = 1L;

  public FixedModalWindow(String id) {
    super(id);
    setResizable(false);
  }

  public FixedModalWindow(String id, IModel<?> model) {
    super(id, model);
    setResizable(false);
  }

  @Override
  public FixedModalWindow setResizable(boolean resizable) {
    // Cannot set resizable on the FixedModalWindow
    return this;
  }

  @Override
  public boolean isResizable() {
    return false;
  }

  @Override
  protected Object getShowJavascript()
  {
    // Hack in some JS to remove the onMove handlers
    StringBuffer showJS = new StringBuffer();
    showJS.append(" ");
    showJS.append((String) super.getShowJavascript());
    showJS.append("var popupWindow = Wicket.Window.get();\n");
    showJS.append("var nullHandler = function() {};\n");
    showJS.append("if(popupWindow != null) {\n");
    showJS.append("popupWindow.bind(popupWindow.caption, nullHandler);\n");
    showJS.append("popupWindow.bind(popupWindow.bottomRight, nullHandler);\n");
    showJS.append("popupWindow.bind(popupWindow.bottomLeft, nullHandler);\n");
    showJS.append("popupWindow.bind(popupWindow.bottom, nullHandler);\n");
    showJS.append("popupWindow.bind(popupWindow.left, nullHandler);\n");
    showJS.append("popupWindow.bind(popupWindow.right, nullHandler);\n");
    showJS.append("popupWindow.bind(popupWindow.topLeft, nullHandler);\n");
    showJS.append("popupWindow.bind(popupWindow.topRight, nullHandler);\n");
    showJS.append("popupWindow.bind(popupWindow.top, nullHandler);\n");
    showJS.append("}\n");
    return showJS.toString();
  }

}

0人赞添加讨论(0) 举报

趁早两清

5楼-- · 2019-05-03 07:49

How to hide close button in your modal window in wicket? We have found such a solution:

ModalWindow yourModal = new ModalWindow("yourModalID") {
        @Override
        public void show(AjaxRequestTarget pTarget) {
            super.show(pTarget);

            pTarget.appendJavascript(""//
                    + "var thisWindow = Wicket.Window.get();\n"//
                    + "if (thisWindow) {\n"//
                    + "$('.w_close').attr('style', 'display:none;');\n"//
                    + "}"//
            );
        }
}

Actually, you can insert whatever class from modal window, and change it in some way. Hope it helps someone :)

0人赞添加讨论(0) 举报

Can the Wicket modal window be customized?

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间