關閉ModalWindow按鍵

我想能夠關閉一個ModalWindow當用戶按下一個鍵，在我的情況下ESC。關閉ModalWindow按鍵

我有一個Javascript監聽其通話取消按鈕的ID的單擊事件的按鍵：

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

這是做了正確的方法是什麼？

我想知道，因爲它在Chrome中工作，但不是在FF中，但它可能是由於我的具體實施。

來源

2011-02-18 SlappyTheFish

「正確」的方法是調用服務器，然後用響應關閉它。你可以利用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-20 22:36:55 tetsuo

這似乎是一個更簡潔的方式 - 謝謝！我已經實現了一個解決方案的版本（我說「版本」是因爲我的實現必須與多個ModalWindows一起工作，所以在JS中我保留了一個打開的窗口列表，以便連續按下ESC關閉下一個模式窗口） Chrome，但在FF中，我仍然在http請求旁邊的Firebug中「中止」。我在modal.close（）上放置了一個斷點，它被觸發，但Firebug已經報告請求被中止。 – SlappyTheFish 2011-02-22 15:23:39

上面的例子是好，非常好，但是有一個問題，它可能是對於一些編程用戶（對我來說）是至關重要的。

對於實際接近發生的情況，有2個Ajax請求發生 - 第一個發出CloseOnESCBehavior，它調用window.close。 MW.close（）將呈現JavaScript，它首先會調用服務器以詢問其windowClosedCallback，並且只會然後關閉（隱藏內容）模式窗口。

我建議不要做這樣的事情 - 在ModalWindow構造函數的代碼：

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-03 09:41:35

此外，您還可以使用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 demo page

來源

2013-01-03 23:52:17

關閉ModalWindow按鍵

回答

相關問題