6

我希望能够在用户按下一个键时关闭一个 ModalWindow，在我的例子中是 ESC。

我有一个按键的 Javascript 侦听器，它调用取消按钮 ID 的点击事件：

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

这是正确的方法吗？

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

4

3 回答 3

7

这样做的“正确”方法是调用服务器，然后用响应关闭它。您可以使用 ajax 行为来做到这一点：

模态测试页.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");
        }
    }
}

模态测试页.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>
于 2011-02-20T22:36:55.873 回答
2

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

对于实际发生的关闭，有 2 个 ajax 请求正在发生 - 第一个是使用CloseOnESCBehaviorwhich 调用发出的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");

        }
    });
于 2012-01-03T09:41:35.153 回答
1

此外，您可以使用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 演示页面上看到这种方法

于 2013-01-03T23:52:17.477 回答