Wicket ModalWindow：单击模式外部以关闭

Question

我需要向 ModalWindow 添加一个行为，以便当用户在模式之外单击时，如果满足特定条件（在我的 respond() 方法中检查服务器端)，模态被驳回。

我尝试根据这个答案实现一些东西。问题是我无法将点击侦听器附加到模式窗口 div，因为在显示模式之前它不会添加到 DOM（该示例将 keyup 附加到文档本身。）

我想扩展 ModalWindow 并通过 getShowJavascript() 添加 JS，但是我没有任何方法将其连接到用于测试的 AbstractDefaultAjaxBehavior.respond() 方法。

Answer 1

我通过将行为添加到通过 ModalWindow.setContent() 添加到模式的小部件中，而不是添加到模式中来解决这个问题。当我的小部件添加到模式中时，掩码 div 出现在 DOM 中，然后我可以成功附加单击处理程序。

也就是说：

public static class CloseModalOnOutsideClickBehavior extends AbstractDefaultAjaxBehavior
{
    private final ModalWindow modal;

    public CloseModalOnOutsideClickBehavior(ModalWindow modal)
    {
        this.modal = modal;
    }

    @Override
    protected void respond(AjaxRequestTarget target)
    {
        if (myConditionIsMet()) modal.close(target);
    }

    @Override
    public void renderHead(IHeaderResponse response)
    {
        response.renderJavascriptReference("http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js");
        response.renderJavascript("" +
                "$(document).ready(function() {\n" +
                "  $('div.wicket-mask-dark').bind('click', function(evt) {\n" +
                        getCallbackScript() + "\n" +
                "        evt.preventDefault();\n" +
                "  });\n" +
                "});", "closeModal");
    }
}

请注意，我有点不稳定地依赖于模态窗口的掩码，该掩码具有名为“wicket-mask-dark”的类；如果您更改 ModalWindow 使用的 CSS 设置，情况可能并非如此。