java – 关闭按键上的ModalWindow

发布时间：2020-12-14 06:04:53 所属栏目：Java 来源：网络整理

导读：我希望能够在用户按下键时关闭ModalWindow,在我的情况下是ESC. 我有一个用于keypress的Javascript监听器,它调用取消按钮的ID的click事件： jQuery("#"+modalWindowInfo.closeButtonId).click(); 这是正确的方法吗？我想知道因为它适用于Chrome但不适用于FF,

我希望能够在用户按下键时关闭ModalWindow,在我的情况下是ESC.

我有一个用于keypress的Javascript监听器,它调用取消按钮的ID的click事件：

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

这是正确的方法吗？

我想知道因为它适用于Chrome但不适用于FF,但它可能是由于我的具体实现.

解决方法

“正确”的方法是调用服务器,然后用响应关闭它.您可以使用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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!