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


132

기본 문서 페이지 에서 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>

2
이것은 기본적으로 활성화되어 있습니다
Adam F

답변:


301

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

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 저장소로의 링크 업데이트)


3
이것은 입력 필드에서 자동 초점을 방지합니다.
토플리스

3
여러 위치에서 대화 상자를 호출하는 경우 data-keyboard 속성을 div.modal에 추가하고 호출자에서 생략 할 수도 있습니다.
Vitalik Verhovodov

2
@nrek이 아래에 지적한 것처럼-탈출과의 근접은 기본적으로 사실이므로 엄격하게 필요하지는 않습니다 data-keyboard="true"- tabindex="-1"행동을 가능하게합니다
Leo

이 솔루션이 Bootstrap 4에서 작동하는지 확인할 수 있습니다. 문서에서 말한 것처럼 기본적으로 작동하지 않는 이유를 모르겠습니다.
Binar Web

또한 data-keyboard컨트롤러가 아닌 모달 요소에 속합니다. 로 설정하여 테스트 할 수 있습니다 false.
WoodrowShigeru

23

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

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

15
이것은 당신이해야 할 유일한 일 이었지만 이제는 div에 'tabindex = "-1"'속성이 있는지 확인해야합니다.
Bala Clark

1
탭 인덱스 만 설정해야했습니다.
weltschmerz

@dchacke 키보드 속성이 기본적으로 true이기 때문입니다! 그래서 그냥 세트의 tabindex = '- 1'
nrek

12

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

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

</div>

3

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

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

-1

부트 스트랩 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/


귀하의 예는 이스케이프 키를 활성화하지 않습니다
Binar Web
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.