java Wicket 模态窗口可以自定义吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1385314/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can the Wicket modal window be customized?
提问by Yuval
I need to add a button to the title bar of a Wicket modal window. I can't find anything useful in the Wicket API that will help me. Is there any way to customize the title bar in this way?
我需要在 Wicket 模式窗口的标题栏中添加一个按钮。我在 Wicket API 中找不到任何有用的东西来帮助我。有没有办法以这种方式自定义标题栏？
采纳答案by Alexey Sviridov
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.
根据 /org/apache/wicket/extension/ajax/markup/html/modal/res/modal.js 你不能通过 wicket api 修改模态窗口装饰器，因为模态窗口标记完全在 javascript 中定义。因此，与往常一样，您可以选择简单但糟糕的方法并自己替换 modal.js，或者在使用 js 修改带有类“w_captionText”的跨度显示后，您几乎无法真正更改模态窗口。或者可能（我没有测试它）您可以在 Caption 属性中定义您的自定义代码，并告诉 wicket 不要在此 Caption 中转义特殊的 html 字符。可能有帮助。
回答by Ru5
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.
您可以借助 CSS 实现这种效果。创建您的自定义模式窗口（以防您不想创建自定义样式）并指定 css 资源。
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
/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
/org/ru5/test/res/custom-modal.css
.headBtn{position: absolute; z-index: 20001; top: 2px; left: 200px;}
/org/ru5/test/TestPanelForTestWindow.html
/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.
您可以尝试覆盖 modal.js 函数，或者只是在 JS DOM 的帮助下制作一个技巧。希望这会有所帮助。
回答by equinox
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();
}
}
回答by Gytis
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 :)
实际上，您可以从模态窗口插入任何类，并以某种方式对其进行更改。希望它可以帮助某人:)
