Wicket ModalWindow: Klicken Sie außerhalb von Modal, um es zu schließen

Question

Ich muss ModalWindow so verhalten, dass das Modal verworfen wird, wenn ein Benutzer außerhalb des Modals klickt und eine bestimmte Bedingung erfüllt ist (in meiner respond()-Methode serverseitig aktiviert).

Ich habe versucht, etwas basierend auf dieser Antwort zu implementieren.Das Problem ist, dass ich dem modalen Fenster div keinen Klick-Listener hinzufügen kann, da er dem DOM erst hinzugefügt wird, wenn das modale angezeigt wird (im Beispiel wird dem Dokument selbst ein generischer Codetagcode hinzugefügt.)

Ich habe darüber nachgedacht, keyup zu erweitern und das JS über ModalWindow hinzuzufügen, aber dann habe ich keine Möglichkeit, es für den Test mit einer getShowJavascript()-Methode zu verbinden.

Answer 1

Ich habe dieses Problem gelöst, indem ich das Verhalten nicht dem Modal, sondern dem Widget hinzugefügt habe, das ich dem Modal über ModalWindow.setContent() hinzufüge.Wenn mein Widget zum Modal hinzugefügt wird, ist das Maskendiv im DOM vorhanden, und ich kann erfolgreich einen Klick-Handler anhängen.

Das heißt:

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

Beachten Sie, dass ich etwas prekär bin, abhängig von der Maske des Modalfensters mit einer Klasse namens "Wicket-Maske-Dunkel".Dies ist möglicherweise nicht der Fall, wenn Sie die von ModalWindow verwendeten CSS-Einstellungen ändern.