KeypressのModalWindowを閉じる

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

質問

私はユーザーがキーを押したときにModalWindowを閉じたいのですが、My Case Esc。

キャンセルボタンのIDのクリックイベントを呼び出すキープレスのJavaScriptリスナーを持っています： 

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

これはそれをするための正しい方法ですか？

私はそれがChromeで動作しているがFFで動作しないので疑問に思っていますが、私の特定の実装に起因する可能性があります。

役に立ちましたか？

解決

The 'right' way to do it is to call the server, then close it with the response. You can do this with an ajax behavior:

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>

他のヒント

The example above is good, very good, however there is one issue which may be crucial for some programming users (was for me).

For the actual close to happen there are 2 ajax requests happening - first one is issued with the CloseOnESCBehavior which calls window.close. MW.close() would render javascript which would first do call to server to ask its windowClosedCallback, and would only then close (hide contents of) the modal window.

I'd suggest instead doing something like this - in the code of 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");

        }
    });

Also, you can use 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);

And the ESC key works fine. You should see this aproach at Wicket JQuery UI demo page

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top