在按键上关闭ModalWindow

Question

在按键上关闭ModalWindow

Sla*_*ish 6 java wicket keypress modal-window

我希望能够在用户按下键时关闭ModalWindow,在我的情况下是ESC.

我有一个用于keypress的Javascript监听器,它调用取消按钮的ID的click事件:

jQuery("#"+modalWindowInfo.closeButtonId).click();

Run Code Online (Sandbox Code Playgroud)

这是正确的方法吗？

我想知道因为它适用于Chrome但不适用于FF,但它可能是由于我的具体实现.

Answer 1

tet*_*suo 7

"正确"的方法是调用服务器,然后用响应关闭它.您可以使用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");
        }
    }
}

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，8 月前
查看次数：	3446 次
最近记录：	11 年，9 月前