在按键上关闭ModalWindow [英] Close ModalWindow on keypress
本文介绍了在按键上关闭ModalWindow的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我希望能够在用户按下某个键时关闭一个ModalWindow，在我的情况下是ESC。
I would like to be able to close a ModalWindow when the user presses a key, in my case ESC.
我有一个用于按键调用的Javascript监听器取消按钮ID的点击事件：
I have a Javascript listener for the keypress which calls the click event of the cancel button's ID:
jQuery("#"+modalWindowInfo.closeButtonId).click();
这是正确的方法吗？
我很想知道因为它适用于Chrome但不适用于FF，但可能是因为我的具体实现。
I am wondering because it works in Chrome but not in FF, but it could be due my specific implementation.
推荐答案
正确的方法是调用服务器，然后用响应关闭它。您可以使用ajax行为执行此操作：
The 'right' way to do it is to call the server, then close it with the response. You can do this with an ajax behavior:
ModalTestPage.java
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
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>
这篇关于在按键上关闭ModalWindow的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
