Question

我希望能够在用户按下某个键时关闭一个ModalWindow，在我的情况下是ESC。

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

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

这是正确的方法吗？

我很想知道因为它适用于Chrome但不适用于FF，但可能是因为我的具体实现。

Answer 1

“正确”的方法是调用服务器，然后用响应关闭它。您可以使用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>

Answer 2

上面的示例很好，非常好，但是有一个问题对某些编程用户来说可能是至关重要的（对我而言）。

对于实际接近发生的事件，发生了2个ajax请求 - 第一个是CloseOnESCBehavior发出的，调用window.close。 MW.close（）将呈现javascript，它首先会调用服务器来询问其windowClosedCallback，并且只会然后关闭（隐藏内容）模态窗口。

我建议改为做类似的事情 - 在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");

        }
    });

Answer 3

此外，您可以使用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

看到这个问题

在按键上关闭ModalWindow

3 个答案: