내 경우 ESC에서 사용자가 키를 누르면 ModalWindow를 닫을 수 있어야합니다. 이 그것을 할 수있는 올바른 방법인가ModalWindow on keypress
jQuery("#"+modalWindowInfo.closeButtonId).click();
:
내가 취소 버튼의 ID의 클릭 이벤트 호출 키를 누를 때 자바 스크립트 리스너가?
크롬에서는 작동하지만 FF에서는 작동하지 않기 때문에 궁금합니다. 그러나 구체적인 구현으로 인해 발생할 수 있습니다.
'할 수있는'올바른 방법은 서버를 호출 한 다음 응답으로 닫는 것입니다. 당신은 아약스 행동이 작업을 수행 할 수 있습니다
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 건의 아약스 요청이 있습니다. 첫 번째 것은 CloseOnESCBehavior으로 발행되며 window.close입니다. MW.close()는 서버에 먼저 호출하여 windowClosedCallback을 요청하는 javascript를 렌더링하고 다음은 모달 창을 닫습니다 (내용을 숨 깁니다).
내가 대신이 같은 일을 건의 할 것 - 모달 윈도의 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");
}
});
, 사용할 수를 Wicket Jquery UI
HTML
<div wicket:id="dialog">[dialog]</div>
자바
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에서는 Firebug에서 http 요청 옆에 여전히 "중단"됩니다. modal.close()에 중단 점을 넣었지만 Firebug는 이미 요청이 중단되었다고보고합니다. – SlappyTheFish
플롯이 두껍습니다. getCallbackScript()에서 반환 된 JS의 양쪽면에 alert()을두면 FF로 작동합니다. – SlappyTheFish
FF로 ESC 키가 현재 요청을 죽이면 요청이 즉시 중단됩니다. keydown 이벤트는 e.preventDefault()를 호출하여 삼킬 수 있습니다. 답변을 업데이트하고 올바르게 표시해 드리겠습니다 - 감사합니다! – SlappyTheFish