Wicket fenêtre modale: cliquez modal en dehors de rejeter

Question

Je dois ajouter un comportement à ModalWindow tel que lorsqu'un utilisateur clique en dehors du modal, si une certaine condition est remplie (côté serveur vérifié dans ma méthode de respond()), le modal est rejeté.

J'ai essayé quelque chose basé sur la mise en œuvre cette réponse . Le problème est que je ne peux pas attacher un écouteur de clic dans la fenêtre modale div parce qu'il est pas ajouté au DOM jusqu'à ce que le modal est affiché (l'exemple attache une keyup au document lui-même.)

Je pensais que l'extension ModalWindow et en ajoutant la JS via getShowJavascript(), mais je ne dispose pas de moyens pour se connecter à une méthode de AbstractDefaultAjaxBehavior.respond() pour le test.

Answer 1

Je résolu ce problème en ajoutant le comportement pas modal, mais plutôt au widget ajouter au modal via ModalWindow.setContent(). Quand mon widget est ajouté au modal, la div masque est présent dans les DOM, et je peux ensuite attacher avec succès un gestionnaire de clic.

A savoir:

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

Notez que je suis un peu en fonction en équilibre précaire sur le masque de la fenêtre modale ayant une classe nommée « guichet-masque noir »; cela ne peut être le cas si vous modifiez les paramètres CSS utilisés par ModalWindow.