我想能够关闭一个ModalWindow当用户按下一个键,在我的情况下ESC。关闭ModalWindow按键
我有一个Javascript监听其通话取消按钮的ID的单击事件的按键:
jQuery("#"+modalWindowInfo.closeButtonId).click();
这是做了正确的方法是什么?
我想知道,因为它在Chrome中工作,但不是在FF中,但它可能是由于我的具体实施。
我想能够关闭一个ModalWindow当用户按下一个键,在我的情况下ESC。关闭ModalWindow按键
我有一个Javascript监听其通话取消按钮的ID的单击事件的按键:
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>
上面的例子是好,非常好,但是有一个问题,它可能是对于一些编程用户(对我来说)是至关重要的。
对于实际接近发生的情况,有2个Ajax请求发生 - 第一个发出CloseOnESCBehavior
,它调用window.close
。 MW.close()将呈现JavaScript,它首先会调用服务器以询问其windowClosedCallback
,并且只会然后关闭(隐藏内容)模式窗口。
我建议不要做这样的事情 - 在ModalWindow构造函数的代码:
add(new AbstractBehavior() {
@Override
public void renderHead(IHeaderResponse response) {
response.renderOnDomReadyJavascript(
" if($(document).data('wicketWindowCloseBound')) {return;} "
+ " $(document).data('wicketWindowCloseBound', true); "
+ " $(document).bind('keyup', function(evt) {\n"
+ " if (evt.keyCode == 27) {\n"
+ getCloseJavacript()
+ "\n"
+ " evt.preventDefault();\n"
+ " evt.stopPropagation();\n"
+ " }\n"
+ " });\n");
}
});
此外,您还可以使用Wicket Jquery UI
HTML
<div wicket:id="dialog">[dialog]</div>
的Java
MessageDialog dialog = new MessageDialog("dialog", "Warning", "Is it ok?",
DialogButtons.OK_CANCEL, DialogIcon.WARN)
{
protected void onClose(AjaxRequestTarget target, DialogButton button)
{
if(button != null && button.equals(LBL_OK))
{
//do something here
//note1: #equals() compare either DialogButton or String (button text)
//note2: predefined button text are:
//LBL_OK, LBL_CANCEL, LBL_YES, LBL_NO, LBL_CLOSE, LBL_SUBMIT
}
}
}
this.add(dialog); //TODO: open it, using dialog.open(target);
而ESC键正常工作。你应该看到这个问题在Wicket JQuery UI demo page
这似乎是一个更简洁的方式 - 谢谢!我已经实现了一个解决方案的版本(我说“版本”是因为我的实现必须与多个ModalWindows一起工作,所以在JS中我保留了一个打开的窗口列表,以便连续按下ESC关闭下一个模式窗口) Chrome,但在FF中,我仍然在http请求旁边的Firebug中“中止”。我在modal.close()上放置了一个断点,它被触发,但Firebug已经报告请求被中止。 – SlappyTheFish 2011-02-22 15:23:39