Fechar ModalWindow ao pressionar a tecla

StackOverflow https://stackoverflow.com/questions/5042426

Pergunta

Gostaria de poder fechar uma ModalWindow quando o usuário pressionar uma tecla, no meu caso ESC.

Eu tenho um ouvinte Javascript para o pressionamento de tecla que chama o evento click do ID do botão cancelar:

jQuery("#"+modalWindowInfo.closeButtonId).click();

Esta é a maneira correta de fazer isso?

Estou me perguntando porque funciona no Chrome, mas não no FF, mas pode ser devido à minha implementação específica.

Foi útil?

Solução

A maneira 'certa' de fazer isso é chamar o servidor e fechá-lo com a resposta.Você pode fazer isso com um comportamento ajax:

ModalTestPage.java

public class ModalTestPage extends WebPage {
    public ModalTestPage(PageParameters parameters) {
        super(parameters);

        final ModalWindow modal = new ModalWindow("modal");
        modal.setContent(new Fragment(modal.getContentId(), "window", this));
        add(modal);

        add(new AjaxLink<Void>("link") {
            @Override
            public void onClick(AjaxRequestTarget target) {
                modal.show(target);
            }
        });

        add(new CloseOnESCBehavior(modal));
    }

    private static class CloseOnESCBehavior extends AbstractDefaultAjaxBehavior {
        private final ModalWindow modal;
        public CloseOnESCBehavior(ModalWindow modal) {
            this.modal = modal;
        }    
        @Override
        protected void respond(AjaxRequestTarget target) {
            modal.close(target);
        }    
        @Override
        public void renderHead(Component component, IHeaderResponse response) {
            response.renderJavaScriptReference("https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js");
            response.renderJavaScript("" +
                "$(document).ready(function() {\n" +
                "  $(document).bind('keyup', function(evt) {\n" +
                "    if (evt.keyCode == 27) {\n" +
                getCallbackScript() + "\n" +
                "        evt.preventDefault();\n" +
                "    }\n" +
                "  });\n" +
                "});", "closeModal");
        }
    }
}

ModalTestPage.html

<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>

  <a wicket:id="link">SHOW</a>
  <div wicket:id="modal"></div>

<wicket:fragment wicket:id="window">
  Press ESC to dismiss
</wicket:fragment>
</body>
</html>

Outras dicas

O exemplo acima é bom, muito bom, porém há uma questão que pode ser crucial para alguns usuários de programação (foi para mim).

Para que o fechamento real aconteça, há 2 solicitações ajax acontecendo - a primeira é emitida com o CloseOnESCBehavior que chama window.close.MW.close() renderizaria javascript que primeiro chamaria o servidor para perguntar windowClosedCallback, e só faria então feche (oculte o conteúdo) da janela modal.

Eu sugiro fazer algo assim - no código do ModalWindow ctor: 

    add(new AbstractBehavior() {
        @Override
        public void renderHead(IHeaderResponse response) {
            response.renderOnDomReadyJavascript(
                    " if($(document).data('wicketWindowCloseBound')) {return;} "
                            + " $(document).data('wicketWindowCloseBound', true); "
                            + " $(document).bind('keyup', function(evt) {\n"
                            + "    if (evt.keyCode == 27) {\n"
                            + getCloseJavacript()
                            + "\n"
                            + "        evt.preventDefault();\n"
                            + "        evt.stopPropagation();\n"
                            + "    }\n"
                            + "  });\n");

        }
    });

Além disso, você pode usar UI do Wicket Jquery

HTML

<div wicket:id="dialog">[dialog]</div>

Java

MessageDialog dialog = new MessageDialog("dialog", "Warning", "Is it ok?",
                        DialogButtons.OK_CANCEL, DialogIcon.WARN)
    {
        protected void onClose(AjaxRequestTarget target, DialogButton button)
        {
            if(button != null && button.equals(LBL_OK))
            {
                //do something here

                //note1: #equals() compare either DialogButton or String (button text)
                //note2: predefined button text are:
                //LBL_OK, LBL_CANCEL, LBL_YES, LBL_NO, LBL_CLOSE, LBL_SUBMIT
            }
        }   
    }

    this.add(dialog); //TODO: open it, using dialog.open(target);

E a tecla ESC funciona bem.Você deve ver essa abordagem em Página de demonstração da UI do Wicket JQuery

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top