팝업 양식을 닫는 ESC kep

ESC 버튼을 사용하여 팝업 대화 상자를 닫을 수있는 온라인 코드를 찾았습니다. 다음과 같이 코드는 다음과 같습니다팝업 양식을 닫는 ESC kep

<script type="text/javascript"> 
function ESCclose(evt) { 
    if (evt.keyCode == 27) 
    window.close(); 
} 
</script>

때 onKeyPress

<body onkeypress="ESCclose(event)">

내가 양식 태그에 때 onKeyPress 사용했습니다. ESC 버튼을 사용하여 대화 상자를 닫을 수 없어 작동하지 않습니다. 어떤 도움이 필요합니까?

출처

2017-04-06 beginner

가능한 복제 [자바 스크립트 팝업 창에서 ESC의를 keyDown을 처리하는 방법 (http://stackoverflow.com/questions/1481626/how-to-handle-esc-keydown-on-javascript-popup-window) – bharat

keypress 이벤트가 인쇄 할 수없는 문자 (예 : 백 스페이스 또는 이스케이프)를 트리거하지 않기 때문에 문제가 발생했습니다.

문제를 해결하려면 대신 keydown을 사용할 수

function ESCclose(evt) { 
 
    if (evt.keyCode == 27) { 
 
    //window.close(); 
 
    console.log('close the window...') 
 
    } 
 
}

<body onkeydown="ESCclose(event)"></body>

당신이 jQuery로 질문에 태그를 추가 한 것처럼

, 당신은 더 나은 HTML과 JS 코드를 분리하는 것을 사용할 수 있습니다 :

$(document).on('keydown', function(e) { 
    if (e.keyCode == 27) 
    window.close(); 
});

on* 01에 이벤트 속성이 필요하지 않습니다. 위 코드와 함께요소.

출처

2017-04-06 08:13:59

아주 좋은 설명 @RoryMcCrossan! +1 ... –

답장을 보내 주셔서 감사합니다. 부트 스트랩 모달을 사용하면서 div 태그에 onkeydown을 배치했습니다. 그 stil는 작동하지 않는다. jquery 코드를 사용하는 방법을 알고 싶습니까? – beginner

부트 스트랩 모달을 사용한다면'window.close()'가 필요하지 않습니다. 모달 자체에서'hide'를 호출해야합니다. 부트 스트랩 모달 문서보기 : http://getbootstrap.com/javascript/#modals-methods –

$(document).on('keydown',function(event) { 
    if (event.keyCode == 27) { 
     window.close(); // Do Something 
    } 
});

출처

2017-04-06 08:14:43

해결책 주셔서 감사합니다 – beginner

// 탈출 키의 모달을 닫거나 모달 외부를 클릭하는 기본 동작을 제공하는 부트 스트랩 모달을 사용하십시오. 또는

bootbox을 사용하면 예 또는 아니요를 클릭하면 콜백이 적용됩니다. 또는

다음과 같이 keyup 이벤트를 사용하여 모달을 닫습니다. Keyup 이벤트는 Keydown 이벤트 이후에 트리거되므로이 시나리오에서 keyup 이벤트를 사용하는 것이 더 적절합니다.

$(document).on('keyup',function(event) { 
    if (event.keyCode == 27) { 
     modal.hide(); 
    } 
});

업데이트 : ESC 키 누르기에서 부트 스트랩 모달 표시 및 숨기기에 대한 아래 작업 예제 html을 작성하십시오. 주 : data-keyboard = "true"와 함께 tabindex = -1 속성은 ESC 키 누르기 기능에 중요합니다.

<html> 
<head> 
    <meta charset="utf-8"> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script> 
     $(document).ready(function() {   
     $("#hereBtn").click(function (e) { 
      $("#alertModal").modal('show'); 
     }); 
     }); 
    </script> 
    <title>Bootstrap modal</title> 
</head> 
<body> 
    <div>Click <button id="hereBtn" class="btn btn-success">HERE</button> to open Success modal</div> 
    <div id="alertModal" class="modal fade" role="dialog" data-keyboard="true" tabindex="-1"> 
     <div class="modal-dialog modal-md"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 id="alertHeader"> SUCCESS!!</h4> 
      </div> 
      <div class="modal-body"> 
       <div id="alertMessage" class="alert alert-success">Now hit ESC or click outside this modal to close this modal window</div> 
      </div>    
     </div> 
     </div> 
    </div> 
</body> 
</html>

의

출처

2017-04-06 08:33:28 PrashanthBR

부트 스트랩 모달을 사용하고 있습니다. jquery를 처음 접했을 때. 위 코드를 어디에 두어야하는지 알려주시겠습니까? 어떻게 내 HTML 코드에 링크 할 것인가? – beginner

나는 부트 스트랩 모달을 사용하고있다.기본 esc 버튼 동작이없고 외부를 클릭 할 때 닫히지 않습니다. 도움을 주신 덕분에 – beginner

. 그것의 작동 :) – beginner

팝업 양식을 닫는 ESC kep

답변

관련 문제