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

Question

我需要向ModalWindow 添加一个行为，这样当用户在模式之外点击时，如果满足某个条件（在我的respond() 方法中检查服务器端），模式就会被关闭。

我尝试基于this answer 实现一些东西。问题是我无法将点击侦听器附加到模态窗口 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 设置，情况可能并非如此。