Menu
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 the 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.
285
Click the button to launch the modal. Then click on the backdrop, close icon or close button to close the modal.
How do I stop closing the modal when I click outside? Data-keyword="false" is to prevent closing modal while clicking Esc button, while data-backdrop="static" , allows you keep modal pop-up opened when clicking on Gray area.
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");
}
});
answered Oct 02 '22 18:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With