Закрыть ModalWindow при нажатии клавиш - PullRequest
Новая
       17

Закрыть ModalWindow при нажатии клавиш

6 голосов
/ 18 февраля 2011

Я хотел бы иметь возможность закрыть ModalWindow, когда пользователь нажимает клавишу, в моем случае ESC.

У меня есть прослушиватель Javascript для нажатия клавиши, который вызывает событие click для идентификатора кнопки отмены:

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

Это правильный способ сделать это?

Мне интересно, потому что он работает в Chrome, но не в FF, но это может быть связано с моей конкретной реализацией.

Ответы [ 3 ]

7 голосов
/ 21 февраля 2011

«Правильный» способ сделать это - вызвать сервер, а затем закрыть его ответом. Вы можете сделать это с помощью поведения 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>
2 голосов
/ 03 января 2012

Приведенный выше пример хорош, очень хорош, однако есть одна проблема, которая может иметь решающее значение для некоторых пользователей программирования (была для меня).

Для фактического закрытия происходит 2 запроса ajax - сначала выдается CloseOnESCBehavior, который вызывает window.close. MW.close () отобразит javascript, который сначала вызовет сервер, чтобы запросить у него windowClosedCallback, и только затем закроет (скрыт содержимое) модальное окно.

Я бы предложил вместо этого сделать что-то вроде этого - в коде 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");

        }
    });
1 голос
/ 04 января 2013

Также вы можете использовать Wicket Jquery UI

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

И ключ ESC работает нормально.Вы должны увидеть этот подход на демонстрационной странице Wicket JQuery UI

...