[twitter-bootstrap] Twitter 부트 스트랩 모달에서 이스케이프 키 닫기 기능을 어떻게 활성화합니까?

Program / 글쓴이

기본 문서 페이지 에서 Twitter Bootstrap 모달에 대한 지침을 따르고 언급 된 구문을
사용 data-keyboard="true"했지만 이스케이프 키는 모달 창을 닫지 않습니다.
내가 놓친 다른 것이 있습니까?

암호:

<a href="#my-modal" data-keyboard="true" data-toggle="modal">Open Modal</a>

<div class='modal fade hide' id='my-modal'>
  <div class='modal-body'>
    <div>Test</div>
  </div>
</div>

답변

이것은 키업 이벤트가 바인딩되는 방법에 문제가있는 것 같습니다.

tabindex이 문제를 해결하기 위해 속성을 모달에 추가 할 수 있습니다 .

tabindex="-1"

따라서 전체 코드는 다음과 같아야합니다.

<a href="#my-modal" data-keyboard="true" data-toggle="modal">Open Modal</a>

<div class='modal fade hide' id='my-modal' tabindex='-1'>
    <div class='modal-body'>
    <div>Test</div>
    </div>
</div>

자세한 내용 은 github 에서이 문제에 대한 토론을 볼 수 있습니다

(새로운 TWBS 저장소로의 링크 업데이트)

답변

또한 javascript를 통해 호출하는 경우 다음을 사용하십시오.

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

답변

tabindex="-1"모달 div 에 속성 추가

<div id="myModal" class="modal fade" role="dialog" tabindex="-1">

</div>

답변

각도에서 나는 다음과 같이 사용하고 있습니다 :

var modalInstance = $modal.open({
 keyboard: false,
 backdrop: 'static',
 templateUrl: 'app/dashboard/view/currentlyIneligibleView.html',
 controller: 'currentlyIneligibleCtrl',
 resolve: {
     data: function () { return param; }
    }
});
  • 배경 : ‘정적’=> 외부 클릭시 종료 중지
  • 키보드 : false => escape buttton을 사용하여 닫으십시오.

답변

부트 스트랩 3

HTML에서는 data-backdropstatic으로 설정 data-keyboard하고 false로 설정하십시오.

예 :

<button type="button" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Launch modal</button>

또는 

$('#myModal').modal({
  backdrop: 'static',
  keyboard: false
})

라이브 테스트 :

https://jsfiddle.net/sztx8qtz/

더 알고 : http://budiirawan.com/prevent-bootstrap-modal-closing/

답변