Esc 키 JQuery와 모달 대화 상자를 클릭하면 홈 페이지로 사용자를 보내는 방법

Robertcode :

이스케이프 키를 모달 대화 상자를 누르면 웹 홈 페이지로 이동할 수있는 방법이 있습니까? 아래는 내가 사용하고 모달 대화 상자는 다음과 같습니다

        <script>
            $(function () {
                $("#dialog-login-message").dialog({
                    modal: true,
                    buttons: {
                        Ok: function () {
                            document.location.href = "/";
                            $(this).dialog("close");
                        }
                    }
                });
            });
        </script>

        <div id="dialog-login-message" title="Login Required">
            <p>
                <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
                You are not logged into this website. You need to be logged into this website to use the demo.;
            </p>
        </div>

사용자는이 대화 상자가 나타납니다 인증되지 않습니다. 그들이 OK를 누르면이 홈 페이지에 걸립니다. 그들이 이스케이프 키를 누르면 그러나 대화 상자가 통과하고보기를 사용할 수있게하고 있습니다. 나는 홈 페이지에 사용자가 다시 보내려하지만 난 방법에서 여기 모르겠어요. 미리 감사드립니다.

Jerdine 와이즈 :

당신은 단순히의 keyup /를 keyDown 이벤트를 연결하고 클릭 버튼을 얻을 수 있습니다;

$(document).keyup(function(e) {
  if (e.keyCode === 27){ // 27 is esc keycode
     $(this).dialog("close");
     document.location.href = "/";                
  }
});

하지만,이 이벤트는 따라서 누르면 페이지에 바인딩됩니다 esc홈페이지로 리디렉션됩니다 언제든지.

당신이 원하는 것은 추가입니다 var modalState그 대화가 활성화되어 있는지 확인 것이다.

<script>
   var modalState = 0; // declare it outside, 0 means unopened

   $(function () {
       modalState = 1; // change it to active

      $("#dialog-login-message").dialog({
         modal: true,
         buttons: {
            Ok: function () {
               document.location.href = "/";
               $(this).dialog("close");
            }
         }
      });
   });

   $(document).keyup(function(e) {
      if (e.keyCode === 27){ // 27 is esc keycode
         if(modalState == 1){ // check if dialog is active
            $(this).dialog("close");
            document.location.href = "/"; 
         }              
      }
   });
</script>