6

ユーザーがキー（私の場合はESC）を押したときに、モーダルウィンドウを閉じられるようにしたいと思います。

キャンセルボタンのIDのクリックイベントを呼び出すキープレス用のJavascriptリスナーがあります。

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

これは正しい方法ですか？

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

4

3 に答える 3

7

それを行う「正しい」方法は、サーバーを呼び出してから、応答でサーバーを閉じることです。これは、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>
于 2011-02-20T22:36:55.873 に答える
2

上記の例は良いですが、非常に良いですが、一部のプログラミングユーザーにとって重要な問題が1つあります（私にとってはそうでした）。

実際のクローズが発生するためには、2つのajaxリクエストが発生します-最初のリクエストは、CloseOnESCBehaviorを呼び出すで発行されますwindow.close。MW.close（）は、最初にサーバーを呼び出してその要求を行うjavascriptをレンダリングしwindowClosedCallback、次にモーダルウィンドウを閉じます（内容を非表示にします）。

代わりに、ModalWindowctorのコードで次のようなことを行うことをお勧めします。

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

        }
    });
于 2012-01-03T09:41:35.153 に答える
1

また、WicketJqueryUIを使用できます

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キーは正常に機能します。このアプローチは、WicketJQueryUIデモページで確認できます。

于 2013-01-03T23:52:17.477 に答える