열려있는 Select2 드롭 다운에서 이스케이프 키를 누르면 부트 스트랩 모달을 닫을 수 없습니다.

Question

Twitter 부트 스트랩 3을 사용하면 Select2 드롭 다운이 모달에 포함됩니다.
Select2 요소에서 단축키를 누르면 드롭 다운과 모달 대화 상자가 즉시 닫힙니다.

어떻게 이런 경우에 모달을 닫지 못하게 할 수 있습니까?
그러나 현재 포커스가있는 드롭 다운이 인 경우 인 경우 이스케이프 키를 누르면 모달을 닫는 것이 좋습니다. 따라서 위에서 설명한 상황에서는 두 개의 이스케이프 키가 필요합니다. 첫 번째는 드롭 다운을 닫고 두 번째는 모달을 닫습니다.

쉽게 동작을 재현하기 위해 jsfiddle을 준비했습니다 http://jsfiddle.net/a82RX/.
는 (나는 아주 간단한 선택 2 드롭 다운 메뉴와 부트 스트랩 문서처럼 같은 모달을 사용했다.)

가 이미 방해하고

select2-close 

이벤트를 수신하여 모달의 폐쇄를 취소하려 성공하지 못했습니다.

Answer 1

사용

$('#myModal').modal({keyboard:false}); 

참조 http://getbootstrap.com/javascript/#modals-usage

완벽한 솔루션 :

HTML

<button class="btn btn-primary btn-lg" id="modalLaunch">Launch demo modal</button> 

스크립트 :

$(function() { 
    $("#e1").select2(); 
    $("#modalLaunch").click(function() { 
     $('#myModal').modal({ 
      show:true, 
      keyboard:false, 
      backdrop:'static' 
     }); 
    }); 
}); 

Answer 2

이런 종류의 상황도 발생했으며이 문제에 대한 해결책을 찾았습니다. 그것은 다른 아이디어의 조합입니다.

1) 모달을 표시 할 때 키보드를 false로 설정하십시오. 코드는 @ravimallya가 제공 한 것입니다.

2) 'esc'키 입력 이벤트를 듣습니다. (난 당신이 또한/키 누름 이벤트를 keyDown을들을 수 있습니다 생각하지만 난의 keyup와 함께 갔다)

var ESCAPE_KEY = 27; 
$('#myModal').on('keyup', function (event) { 
    if (event.which === ESCAPE_KEY) { 
     $('#myModal').modal('hide'); 
    } 
}); 

3) 나는 또한 그리 명확하지 않았다 모달 기능을 닫습니다 두 번 탈출을 구현 한 [보너스] 그렇게 공유하기로 결정 그것 모두와. 기본적으로 포커스가 select2에 있고 드롭 다운이 열려있을 때 'Esc'를 누르면 select2 드롭 다운이 닫힙니다. 그러나 'Esc'를 다시 누르면 아무 일도 일어나지 않습니다. 두 번째 'Esc'의 동작이 올바르지 만 모달을 닫는 것이 좋습니다. 그래서 여기 내 코드 구현은 다음과 같습니다

$('#mySelect').select2(); 
var mySelectContainer = $(mySelect).data('select2').container; 
$(mySelectContainer).on('keyup', function (event) { 
    if (event.which === KeyCodes.Escape) { 
     $('#myModal').modal('hide'); 
    } 
}); 

모달의의 keyup (또는 같은) 핸들러가 'ESC'후 즉시 트리거가 발생하여 이벤트가 작동하지 않습니다 - 가까운 선택 2 듣고 이유는 .

Btw, 많은 keyup/keydown/keypress 이벤트를 구독하는 경우, JQuery HotKeys을 확인해보십시오.이미 사용하고 있다면 위의 해결 방법은 다음과 같습니다.

$('#myModal').on('keyup', null, 'esc', function() { 
    $('#myModal').modal('hide'); 
});