Ventana modal Wicket:haga clic fuera del modal para descartar

Question

Necesito agregar un comportamiento a ModalWindow de modo que cuando un usuario hace clic fuera del modal, si se cumple una determinada condición (comprobada en el lado del servidor en mi respond() método), el modal se descarta.

Intenté implementar algo basado en esta respuesta.El problema es que no puedo adjuntar un detector de clics al div de la ventana modal porque no se agrega al DOM hasta que se muestra el modal (el ejemplo adjunta un keyup al documento mismo.)

Pensé en extender ModalWindow y agregando el JS a través de getShowJavascript(), pero entonces no tengo ningún medio para conectarlo a un AbstractDefaultAjaxBehavior.respond() método para la prueba.

Answer 1

Resolví esto agregando el comportamiento no al modal, sino al widget que agrego al modal a través de ModalWindow.setContent().Cuando mi widget se agrega al modal, la máscara div está presente en el DOM y luego puedo adjuntar con éxito un controlador de clic.

Esto es:

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");
    }
}

Tenga en cuenta que dependo de manera algo precaria de que la máscara de la ventana modal tenga una clase llamada "wicket-mask-dark";Este puede no ser el caso si modifica la configuración CSS utilizada por ModalWindow.