Close ModalWindow on keypress
I would like to be able to close a ModalWindow when the user presses a key, in my case ESC.
I have a Javascript listener for th开发者_JAVA百科e keypress which calls the click event of the cancel button's ID:
jQuery("#"+modalWindowInfo.closeButtonId).click();
Is this the correct way to do it?
I am wondering because it works in Chrome but not in FF, but it could be due my specific implementation.
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
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>
The example above is good, very good, however there is one issue which may be crucial for some programming users (was for me).
For the actual close to happen there are 2 ajax requests happening - first one is issued with the CloseOnESCBehavior which calls window.close. MW.close() would render javascript which would first do call to server to ask its windowClosedCallback, and would only then close (hide contents of) the modal window.
I'd suggest instead doing something like this - in the code of ModalWindow ctor:
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");
}
});
Also, you can use 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);
And the ESC key works fine. You should see this aproach at Wicket JQuery UI demo page
加载中,请稍侯......
精彩评论