我希望能够在用户按下键时关闭ModalWindow,在我的情况下是ESC.
我有一个用于keypress的Javascript监听器,它调用取消按钮的ID的click事件：
jQuery("#"+modalWindowInfo.closeButtonId).click();
这是正确的方法吗？
我想知道因为它适用于Chrome但不适用于FF,但它可能是由于我的具体实现.
解决方法
“正确”的方法是调用服务器,然后用响应关闭它.您可以使用ajax行为执行此操作：
ModalTestPage.java
public class ModalTestPage extends WebPage {
public ModalTestPage(PageParameters parameters) {
super(parameters);
final ModalWindow modal = new ModalWindow("modal");
modal.setContent(new Fragment(modal.getContentId(),"window",this));
add(modal);
add(new AjaxLink<Void>("link") {
@Override
public void onClick(AjaxRequestTarget target) {
modal.show(target);
}
});
add(new CloSEOnESCBehavior(modal));
}
private static class CloSEOnESCBehavior extends AbstractDefaultAjaxBehavior {
private final ModalWindow modal;
public CloSEOnESCBehavior(ModalWindow modal) {
this.modal = modal;
}
@Override
protected void respond(AjaxRequestTarget target) {
modal.close(target);
}
@Override
public void renderHead(Component component,IHeaderResponse response) {
response.renderJavaScriptReference("https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js");
response.renderJavaScript("" +
"$(document).ready(function() {\n" +
" $(document).bind('keyup',function(evt) {\n" +
" if (evt.keyCode == 27) {\n" +
getCallbackScript() + "\n" +
" evt.preventDefault();\n" +
" }\n" +
" });\n" +
"});","closeModal");
}
}
}
ModalTestPage.html
<html xmlns:wicket="http://wicket.apache.org"> <head> <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <a wicket:id="link">SHOW</a> <div wicket:id="modal"></div> <wicket:fragment wicket:id="window"> Press ESC to dismiss </wicket:fragment> </body> </html>
